SplitPane
Containers

SplitPane

Panes resizable by pointer or keyboard, with sizes kept as proportions rather than pixels.

Component behavior

Panel sizes are percentages of the group and adapt to container resizing. Nest a SplitPane in a SplitPanel to add another split axis.

Use cases
  • Fixed-position panes with user-adjustable proportions.
  • Panes resized according to the current task.
  • Layouts with persisted pane percentages.
Alternatives

MosaicGrid: users need to rearrange tile positions as well as resize them.

Grid / Flex: the application fixes pane proportions.

Props

SplitPane extends HTMLAttributes<HTMLDivElement> (minus onChange). It fills its parent, so give that parent a height.

SplitPaneProps props
PropTypeDefaultDescription
directionSplitDirection"row""row" for side-by-side panes, "column" for stacked.
sizesnumber[]—Controlled panel sizes, in percent. Use with onSizesChange.
defaultSizesnumber[]—Initial uncontrolled panel sizes. Defaults to each panel defaultSize.
onSizesChange(sizes: number[]) => void—Fires on every drag frame and key press.
stepnumber2Percent a separator moves per arrow-key press.
disabledboolean—Freezes every separator; the panels keep their sizes.
childrenReactNode—SplitPanel children. Separators are inserted between them.

Keyboard

Every separator is a real role="separator" in the tab order, reporting the leading panel's size as aria-valuenow. Focus one and:

Separator keys props
PropTypeDefaultDescription
← / →row—Move the separator by step percent.
↑ / ↓column—Move the separator by step percent.
Home / Endany—Drive the leading panel to its minimum or maximum.
Enter / Spacecollapsible—Fold or restore a collapsible neighbour.

Examples

Two panes

Drag the divider to resize the panels. Focus the divider with Tab to resize with arrow keys.

SplitPane (row)

Three panes, nested axes

Nest a SplitPane inside a SplitPanel to resize along a second axis. Each SplitPane maintains separate panel sizes.

SplitPane (nested)

Controlled

Control the sizes array to persist or reset panel dimensions.

SplitPane (controlled)
ImportTSX
import { SplitPane, SplitPanel } from "@solarius/onset";
import type { SplitDirection } from "@solarius/onset";

<Box h="100%">
  <SplitPane
    direction="row"
    onSizesChange={(s) => localStorage.setItem("layout", JSON.stringify(s))}
  >
    <SplitPanel defaultSize={30} min={18} collapsible scroll>
      <ResourceList />
    </SplitPanel>
    <SplitPanel scroll>
      <ResourceDetail />
    </SplitPanel>
  </SplitPane>
</Box>;

See SplitPanel for pane size limits. Use MosaicGrid for movable tiles.