Resizable split pane layout
Splitter component provides resizable split pane layout. It is built on top of the use-splitter hook and provides a declarative API with Styles API integration.
Splitter.Pane defaultSize , min and max props accept CSS units in addition to plain numbers:
This makes it possible to mix a fixed-width sidebar with a fluid content pane that absorbs the remaining space:
Sizes are reported back in the unit they were declared in: a '240px' pane stays '240px' in sizes / onSizeChange , while a flexible pane reports its resolved percentage. When the container becomes smaller than the sum of the fixed panes, fixed panes shrink proportionally.
Set orientation="vertical" to split panes vertically:
Set collapsible prop on Splitter.Pane to allow the pane to be collapsed by dragging past its minimum size. Use splitterRef to access imperative API for programmatic collapse/expand:
To control panel sizes, use sizes and onSizeChange props:
Current sizes: [ 50, 50 ]
Splitter supports any number of panes. Handles are automatically rendered between panes:
You can nest Splitter components to create complex layouts:
When using multiple panes, set redistribute prop to control how space is borrowed from non-adjacent panels when the immediate neighbor is at its min/max:
Use lineSize prop to control the thickness of the separator line between panes:
Set withHandle={false} to hide the thumb with grip icon. The separator line between panes is still visible and draggable:
Use splitterRef prop to access imperative splitter API:
Splitter component relies on Splitter.Pane order. Wrapping Splitter.Pane is not supported, Splitter.Pane must be a direct child of Splitter .
Splitter component is built on top of the use-splitter hook. If you need more control over the layout and styling, you can use the hook directly.