Top
SplitContainer - Collapsing & locking
SplitContainer
The <SplitContainer /> allows controlling which sides are collapsible and which sides are collapsed.
To specify that only one of the sides is collapsible, use the collapsible prop. It accepts an array of booleans - for example, [true, false] will render the second side as not collapsible (so the splitbar will only have a left arrow on it, to collapse the first side of the <SplitContainer />).
To specify that one of the sides should be collapsed initially, use either collapsedIndex or its uncontrolled version, defaultCollapsedIndex. In the above snippet, defaultCollapsedIndex=0, rendering the left side collapsed initially.
If you use the controlled collapsedIndex prop, make sure you also specify onExpand and onCollapse callback props to update the value of collapsedIndex when the user interacts with the <SplitContainer />. Otherwise, if you don't update the value, the <SplitContainer /> will not update its UI accordingly.
When one of the sides of the <SplitContainer /> is collapsed, the user can expand it with a click on the expand arrow or with a double-click anywhere on the splitbar (unless the <SplitContainer /> is locked).
Using the locked prop, you can disable user interaction with the splitbar (both dragging and collapse/expand actions are disabled).
However, you might want more fine-grained control over how the user can interact with the <SplitContainer /> - in this case, you can combine draggable and collapsible
Notice the snippet above has a <SplitContainer /> configured with collapsible=[false, false], so it's only draggable.
Making both draggable=false and collapsible=[false, false] is the same as specifying locked=true
By default, the <SplitContainer /> offers the ability to resize/adjust the sides by dragging the splitbar. draggable=false disables that behaviour.
The position of the splitbar is given by the value of splitAt or its uncontrolled version defaultSplitAt.
If you're specifying the controlled splitAt prop, make sure you also have an onResize to update the value of splitAt when resizing happens - see the snippet below.
For more details on the split position, read Configuring the split position.