# 12. XlReactWidgetCollapsibleBottomSplitPanel

Component that nested elements split horizontally and have possibility to collapse view.

### Summary

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

### Exports
```
- XlReactWidgetCollapsibleBottomSplitPanel
```

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

### Properties       
- **children** - (array) - array of react elements first is above second is under split pane
- **defaultBottomPaneHeight** - (string or number) - default bottom pane height
- **minSizeBottom** - (string or number) - minimal size of bottom pane
- **minSizeTop** - (string or number) - minimal size of top pane

### Example
```js
import {XlReactWidgetCollapsibleBottomSplitPanel} from 'xl-react-components';

const componentsConstants = {
    defaultPaneHeight: 35,
    minSizeBottom: 27,
    minSizeTop: '40%'
};

export const CollapsibleBottomSplitPanelComponent = () => {
    return <XlReactWidgetCollapsibleBottomSplitPanel
                defaultBottomPaneHeight={componentsConstants.defaultPaneHeight}
                minSizeBottom={componentsConstants.minSizeBottom}
                minSizeTop={componentsConstants.minSizeTop}>
                 <section>
                    Main pane part
                 </section>
                 <section>
                    Bottom pane part
                 </section>
           </XlReactWidgetCollapsibleBottomSplitPanel>;
};
```
