#SplitPanel

SplitPanel in UIToolbox puts its children side by side, or one above the other, with a splitter between each two. The native TwoPaneSplitView takes exactly two panes and does not give its sizes back. SplitPanel takes any number of panes, and a focused splitter moves with the arrow keys and the gamepad directions. A pane can have its own smallest and largest size, and a pane can collapse.

<tb:SplitPanel name="editor" class="tb-split-panel--grip" style="height: 400px;">
    <ui:VisualElement name="files" class="tb-split-panel__pane--collapsible" style="min-width: 120px; max-width: 320px;" />
    <tb:SplitPanel vertical="true">
        <ui:VisualElement name="code" />
        <ui:VisualElement name="console" style="min-height: 60px;" />
    </tb:SplitPanel>
</tb:SplitPanel>

var split = root.Q<SplitPanel>("editor");
split.Sizes = saved ?? new[] { 1f, 3f };
split.SizesChanged += sizes => saved = sizes;

split.PaneCollapsedChanged += (pane, collapsed) => filesButton.value = !collapsed;
split.CollapsePane(0);
split.ExpandPane(0);

• A move changes only the two panes next to the splitter. The other panes and splitters stay where they are, also when the panes have padding or a border.
• The flex-grow of a pane is its weight. The weight shares the space after the padding and the border of each pane, and Sizes gives the parts of that space. A pane without an inline flex-grow takes an equal part, so a pane added later gets a splitter and a share at once.
• Tab reaches each splitter. The directions across the split still move focus.
• The sizes are not saved for you. Keep Sizes from SizesChanged with your other settings. The collapsed panes come back with them.

#Smallest and largest size of a pane

Set min-width and max-width on a pane (min-height and max-height in a vertical panel), inline or in USS. A drag, a key and a gamepad direction stop at these limits. The layout keeps them too when the panel changes its size.

MinPaneSize is the smallest size for the panes that have no larger min-width of their own. It limits only a drag and the keys.

When the two panes of a splitter have no room for both limits, the splitter does not move.

#Collapsible panes

Add the class tb-split-panel__pane--collapsible to a pane. Then:

• A double-click on the splitter next to the pane collapses it to zero. One more double-click expands it. When both panes of the splitter are collapsible, the smaller one collapses.
• Enter, or the submit button of the gamepad, on a focused splitter does the same.
• A drag that leaves the pane less than half of its smallest size collapses it. A drag back past that point expands it.
• An arrow key or a gamepad direction toward a collapsed pane expands it to its smallest size.

CollapsePane and ExpandPane work on each pane, with or without the class. A collapsed pane has the class tb-split-panel__pane--collapsed and no margin, padding or border. The other pane of the splitter takes the space. A pane does not collapse when that other pane has a max-width that is too small for the space.

#The grip

Add the class tb-split-panel--grip to the panel to show a grip in the middle of each splitter. The class works on the splitters of that panel only, not on a nested panel.

#Tips

• Give a side bar a min-width, a max-width and the collapsible class, and bind a toolbar toggle to CollapsePane and ExpandPane.
• Put padding on a child of the pane, not on the pane. Then the content does not jump when the pane collapses.
• A collapsed first or last pane leaves its splitter at the edge of the panel. Turn the grip on so that the user sees where to pull it back.

#Styling