<SplitContainer /> gives you flexibility to configure the split position in a variety of ways: fixed position, percentage position and auto position. The split position can be relative to the first side/edge of the container or to the second side/edge of the container.
Example of possible values for the
prop (or its uncontrolled version
) are (let's assume a vertical
100 - the splitbar is positioned at 100px from the left edge of the container
'30%' - the splitbar is positioned at 30% width from the left edge of the container
'auto' - the splitbar is positioned in such a way to accommodate the auto width of the left side of the container.
-100 - the splitbar is positioned at 100px from the right edge of the container
'-30%' - the splitbar is positioned at 30% width from the right edge of the container
'-auto' - the splitbar is positioned in such a way to accommodate the auto width of the right side of the container.
"-auto", make sure the "auto" sized side only has one child and that child is not a text node.
Additionally, for vertical
<SplitContainer />, make sure the
"auto" sized side does not have
display: block so that it does not fill all the available space horizontally.
To improve performance when resizing, the
is configured by default with
. If you want the resize to happen while dragging, without a proxy, use
<SplitContainer /> components (including the one in the above snippet) are given a height (or are in a layout that gives them a specific height), dragging the splitter to the sides can make the
<SplitContainer /> grow in height, as soon as one of the sides reaches its minimum auto size.
Therefore, it's recommended that you give dimension to the
<SplitContainer />, or be aware that it respects the auto size of its contents.
The split position can be constrained by using the
props so as to enforce that container sides are at least a specified dimension and/or at most the given maximum size.
As soon as the dragging the splitbar hits the constrain points, the splitbar is constrained. In the default theme, it changes the background color to indicate that the constrain has been reached and that further resizing in that direction is not possible.