SplitPane

Two resizable panes by drag or keyboard; nests without double borders.

@ruckc/truss-ui Layout

Import

import { SplitPane } from '@ruckc/truss-ui';

Playground

orientation

size

minFirst

nested

defaultSize

Recipe: a fixed-width sidebar

size is a percentage when it is a number, and pixels or a percentage when it is a string such as '280px' or '30%'. minFirst and minSecond accept the same strings (a bare number is pixels). When you bind size, the unit you started with is kept. In pixel mode the divider's aria-valuenow, aria-valuemin and aria-valuemax are pixels; in percentage mode they are percentages. Arrow keys move the divider (Shift for larger steps), Home and End go to the extremes, and double-click restores defaultSize (the size at mount when omitted).

Sidebar: 220px

Content

<SplitPane size="280px" minFirst="200px" minSecond="30%">
  {#snippet first()}<Sidebar />{/snippet}
  {#snippet second()}<Editor />{/snippet}
</SplitPane>

Recipe: remembered and collapsible

persist is a localStorage key: the size is read when the pane mounts and written when it changes (a blocked or full store is ignored). collapsible="first" or "second" adds a collapse button to the divider, and Enter on the focused divider toggles it. The size is kept while collapsed, so expanding restores it; read or set the state with bind:collapsed. Dragging or using the arrow keys on a collapsed divider expands it.

Sidebar

Content (sidebar open)

<SplitPane bind:size persist="app.sidebar" collapsible="first" bind:collapsed>
  ...
</SplitPane>

API

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	horizontal = side by side (vertical divider); vertical = stacked.
`size` bindable	`(number \| string)`	`50`	Size of the first pane: a number is a percentage (0-100); a string is `'280px'` or `'30%'`. The unit you give is the unit written back when you bind it.
`minFirst`	`(number \| string)`	`120`	Smallest first pane: a number is pixels; a string is `'200px'` or `'20%'`.
`minSecond`	`(number \| string)`	`120`	Smallest second pane, same units as `minFirst`.
`defaultSize`	`(number \| string)`	—	Size that double-click restores (same units as `size`). Defaults to the size the pane had when it mounted, before any persisted value was applied.
`persist`	`string`	—	localStorage key: the size is read on mount and written whenever it changes. Unavailable storage is ignored.
`collapsible`	`'first' \| 'second'`	—	Which pane the divider can collapse: a button on the divider, and Enter on the focused divider toggles it.
`collapsed` bindable	`boolean`	`false`	Whether the collapsible pane is collapsed. The size is kept, so expanding restores it.
`label`	`string`	`'Resize panes'`	Visible label shown above the control.
`first` required snippet	`Snippet`	—	Content of the first pane, as a Svelte snippet.
`second` required snippet	`Snippet`	—	Content of the second pane, as a Svelte snippet.