# XlReactWidgetCollapsibleVerticalSplitPanel

Component that nests elements vertically and has possibility to collapse the view.

### Summary

* [Exports](#exports)
* [Playground](#playground)
* [Properties](#properties)
* [Example](#example)

### Exports
```
- XlReactWidgetCollapsibleVerticalSplitPanel
- XlReactWidgetCollapsibleVerticalSplitPanelConstants
```

### Playground
* [Vertical split pane Widget](https://xebialabs.github.io/xl-react-components/kitchen-sink.html#/widget/widgetVerticalSplitPane)

### Properties       
- **allowResize** - (bool) - controls ability to resize panes, default value is `true`
- **children** - (array or object) - required prop: react children, first is before the split pane, second is after the pane
- **className** - (string) - control class name
- **isCollapsed** - (bool) - describes if the pane is collapsed to the left side
- **minPrimarySideWidth** - (number) - min width(px) of side that is set to primary 
- **minSecondarySideWidth** - (number) - min width(px) of side that is not primary 
- **onChangeWidth** - (function) - on change listener for resizing the pane, returns primary side width
- **primary** - (XlReactWidgetCollapsibleVerticalSplitPanelConstants.SIDES) - sets primary side ('first' or 'second', use SIDES helper instead)
- **primarySideWidth** - (string or number) - primary side width, could be percentage or px
- **resizerStyle** - (object) - inline style for resizer, default value is `{minWidth: 8, width: 8}`
- **shouldAnimate** - (bool) - default is true, sets class to animate with transition after changing `isColapsed` prop
- **sideToCollapse** - (XlReactWidgetCollapsibleVerticalSplitPanelConstants.SIDES) -  required prop, sets which side to collapse
        

### Example
```JSX
import {
    XlReactWidgetCollapsibleVerticalSplitPanel, 
    XlReactWidgetCollapsibleVerticalSplitPanelConstants
} from 'xl-react-components';

const componentsConstants = {
    minPrimarySideWidth: 100,
    minSecondarySideWidth: 100,
    primarySideWidth: XlReactWidgetCollapsibleVerticalSplitPanelConstants.FULL_PANE_WIDTH
};

export const CollapsibleBottomSplitPanelComponent = () => {
    return <XlReactWidgetCollapsibleVerticalSplitPanel
                isCollapsed={false}
                minPrimarySideWidth={componentsConstants.minPrimarySideWidth}
                minSecondarySideWidth={componentsConstants.minSecondarySideWidth}
                primary={XlReactWidgetCollapsibleVerticalSplitPanelConstants.SIDES.primary}
                primarySideWidth={componentsConstants.primarySideWidth}
                sideToCollapse={XlReactWidgetCollapsibleVerticalSplitPanelConstants.SIDES.primary}>
                 <section>
                    Primary pane part
                 </section>
                 <section>
                   Secondary pane part
                 </section>
           </XlReactWidgetCollapsibleVerticalSplitPanel>;
};
```
