Layout

Splitter

Two panes with a handle to resize them, by dragging or with the keyboard.

Ant Design: Splitter

import { Splitter } from '@alea/ui';

Examples

Drag the handle, or focus it and use the arrows.

Layers

Header, Hero, Pricing

Canvas

The selected frame

Stacked panes: code on top, preview below.

Code

Preview

Two panes with a handle between them: drag it, or focus it and use the arrow keys (Ant's Splitter).

Prop	Type	Default	Description
`children`required	`[ReactNode, ReactNode]`	-	The two panes.
`aria-label`	`string`	-	Name of the handle for screen readers. Default "Resize".
`className`	`string`	-	Extra class names for the root element.
`defaultSize`	`number`	`50`	Starting size of the first pane in percent. Default 50.
`max`	`number`	`85`	Largest size of the first panel, in %. Default 85.
`min`	`number`	`15`	Smallest and largest first pane, in percent. Default 15 and 85.
`onSizeChange`	`((size: number) => void)`	-	Called with the first panel's size in %.
`orientation`	`"horizontal" \| "vertical"`	`'horizontal'`	horizontal: side by side (default); vertical: stacked.
`size`	`number`	-	Size of the first pane in percent (controlled).
`style`	`CSSProperties`	-	Inline styles for the root element.

Don't