Splitter

Panels that share a space, with a line between them that the user drags, or moves with the arrow keys, to give more room to one of them. The Splitter fills its container, so the container needs a height.

General

Put Splitter.Panel elements inside. defaultSize is a percent of the space the panels share, and the panels without one split the rest.

Vertical

Set direction to vertical to stack the panels, like an editor above a console.

Limits and three panels

minSize and maxSize keep a panel from being squeezed or stretched too far. A line only moves the two panels next to it. onResize receives the size of every panel, to save the layout.

APIs

Splitter.Props

Attribute	Description	Type	Accepted values	Default
direction	`horizontal` puts the panels side by side, `vertical` stacks them	`string`	`'horizontal', 'vertical'`	`horizontal`
onResize	called with the size of every panel, in percent, when one of them changes	`(sizes: number[]) => void`	-	-
handleLabel	name of the lines, for screen readers	`string`	-	`Resize`
...	native props, passed to the root `div`	`HTMLAttributes`	`'id', 'style', ...`	-

Splitter.Panel.Props

Attribute	Description	Type	Accepted values	Default
defaultSize	percent of the space the panels share; the panels without one split what is left	`number`	`0` to `100`	-
minSize	smallest size the panel can have, in percent	`number`	`0` to `100`	`0`
maxSize	largest size the panel can have, in percent	`number`	`0` to `100`	`100`
...	native props, passed to the panel `div`	`HTMLAttributes`	`'className', 'style', ...`	-

Behavior

• Sizes are percents of the space the panels share, without the lines, so the panels stay in proportion when the container is resized.
• A line moves the panel before it and the one after it, by the same amount, as far as the limits of both allow.
• Overflow: each panel scrolls its own content.
• Panels that come or go start the sizes again from the defaultSize values.

Ref

The ref of Splitter points at the root div, and the ref of a panel at its div.

Accessibility

Each line is a separator that can be focused, with aria-valuenow, aria-valuemin and aria-valuemax for the size of the panel before it, and aria-controls pointing at that panel. The arrow keys that go along the splitter move it by 1%, or by 10% with Shift: Left and Right when the panels are side by side, Up and Down when they are stacked. Home and End go to the smallest and the largest size the limits allow. Name the lines with handleLabel.

Edit this page on GitHub