Splitter

Panels the reader can resize by dragging the bar between them, with per panel minimums, maximums and a collapse control.

Basic

Put two Splitter.Panels in a Splitter with a height, and set defaultSize, min and max on the one you want to size.

Vertical

Set orientation="vertical" to stack the panels and drag the bar up and down.

Emphasis

Set emphasis to subtle for a line that shows on hover, default for a thin line, or strong for a wider bar.

Grip

Set grip to "auto" to show the drag handle on hover, focus or drag, true to always show it, or false to hide it.

Multiple panels

Add a third Splitter.Panel for three resizable panels, with collapsible on the ones that can fold away.

Collapsible

Add collapsible to a panel for collapse buttons on its bar, or { start, end } to collapse it in both directions.

Collapse animation

Set collapsible.motion on the Splitter to animate panels as they collapse and expand, which is off by default.

Collapse buttons

Set a panel's collapsible.showCollapsibleIcon to show its collapse buttons on hover ("auto"), always or never.

Controlled

Keep the sizes in state, pass each one as a panel's size and update them from onResize.

Locked panel

Set resizable={false} on a panel to lock its size so its bar cannot be dragged.

Reset on double-click

Handle onDraggerDoubleClick to put the panels back to their starting sizes when someone double-clicks a bar.

Lazy resize

Add lazy to show a preview line while dragging and resize the panels only when the drag ends.

Nested splitters

Put a vertical Splitter inside a panel of a horizontal one to split the screen both ways.

In context

The component inside real screens, with the components it usually sits beside.

Editor layout

A code editor with a collapsible file tree, the open file in the middle and an inspector panel on the right.

API Reference

Splitter
Splitter's props. Rows marked antuikit in the Version column are added by the kit.
Splitter.Panel
Splitter.Panel's props.