Splitter

A split component that resizes panel sizes, adjustable via mouse drag, arrow keys, double-click reset, with collapse, lazy rendering, multi-panel and custom handle support.

Basic usage

Default 50/50

Left panel

Example

Custom initial ratio

30% / 70%

Left panel 30%

Example

Range limits

min / max as percentages

Left panel 20% ~ 80%

Example

Pixel min/max

min / max also accept pixel values: a 200px suffix clamps in pixels (relative to the container size), plain numbers remain percentages.

min="200px" max="500px"

Left panel 200px ~ 500px

Example

Snap points (snap)

snap defines snap stops (comma-separated percentages such as 25,50,75; 200px pixel values are also supported and converted against the container): while dragging, values within ±8px of a stop snap to it; the arrow keys then jump between stops (falling back to ±1% nudging when no stop remains in that direction). Stops outside min / max are unreachable (min/max wins).

snap snapping

Left ratio: 50%

Left panel

Release near 25% / 50% / 75% to snap; focus the divider and ← / → jump between stops

Example

Vertical direction

The vertical attribute stacks panels top-to-bottom with a horizontal divider; use the ↑ / ↓ arrow keys.

vertical stacking

Top panel 40%

Example

Collapse

The collapsible attribute shows a collapse button on the divider; click to collapse/expand the preceding panel. The collapsed state is written back to the collapsed attribute and an oas-collapse event is fired.

collapsible collapse / expand

Left panel: expanded

Left panel

Example

collapsed — initially folded

Left panel (initially collapsed)

Example

Double-click reset

Double-click a divider to reset it back to the initial ratio (handy after dragging). Reset also fires oas-resize.

Double-click to reset

Drag the divider, then double-click it to reset to 30%

Left panel (initial 30%)

Example

Lazy rendering

With the lazy attribute, dragging only moves the divider visually without re-rendering panel content in real time; sizes are written back and a single oas-resize fires on release. Suitable for heavy panels.

lazy drag

Left panel

Example

Disabled

disabled freezes adjustments: the divider cannot be dragged, double-click reset and arrow-key nudging are disabled too, the cursor returns to normal and aria-disabled="true" is set (the host mirrors data-disabled for styling; config-provider global disabled injection works as well) — for display scenarios with locked layout ratios.

disabled

Left panel 40% (locked)

Example

Custom handle

The slot="handle" lets you place custom handle content (icons/dots etc.) inside the divider; drag and keyboard still work.

slot="handle" custom handle

Left panel

Example

Multiple panels

Each direct child element becomes a panel, with dividers automatically inserted between adjacent panels. The sizes attribute sets panel ratios as comma-separated percentages; mismatched counts fall back to an equal split. Each divider independently supports drag / keyboard / collapse.

multiple three panels with sizes

Panel 1 30%

Panel 2 40%

Panel 3 30%

Example

Resize event

oas-resize event

Left ratio: 50%

Left panel

Drag the divider, or focus it and use the ← / → arrow keys to adjust

Example

API

oas-splitter

Attributes

Attribute	Description	Type	Default
collapsed	Controlled collapse: when present, collapses the panel before the first divider (written back automatically on collapse; external set/remove takes effect immediately)	boolean	—
collapsible	Show a collapse button on the divider; click to collapse/expand the preceding panel	boolean	—
disabled	Freezes resizing: drag/keyboard/dblclick disabled, normal cursor, aria-disabled	boolean	—
lazy	Lazy rendering: while dragging, only the divider moves visually; sizes are written back and panels re-rendered on release (for heavy panels)	boolean	—
max	Maximum ratio of the preceding panel: numbers as percentage, 200px suffix clamps in pixels; invalid values fall back to 90	string	90
min	Minimum ratio of the preceding panel: numbers as percentage, 200px suffix clamps in pixels; invalid values fall back to 10	string	10
percent	Ratio of the preceding panel (%)	string	50
sizes	Multi-panel mode panel ratios (comma-separated percentages, e.g. 30,40,30); falls back to equal split when count mismatches panel count	string	—
snap	Drag snap stops: comma-separated percentages or pixel values; dragging within ±8px of a stop snaps to it, arrow keys jump between stops	string	—
vertical	Vertical direction: panels stack top-to-bottom, divider is horizontal, keyboard uses ArrowUp/Down	boolean	—

Events

Event	Description
oas-collapse	Fired when the collapse button toggles, detail: { collapsed, side } (side=left means the panel before the divider)
oas-resize	Fired after resizing. Two-panel mode detail: { percent }; multi-panel mode detail: { percent, index, sizes }

Slots

Name	Description
handle	Custom handle content inside the divider (icon/dots etc.); falls back to the default grip
left	Left panel content (two-panel mode)
right	Right panel content (two-panel mode)

The divider is role="separator" + tabindex="0"; once focused, ← / → adjust by 1% each time.