Splitter

bs-splitter lays out its direct children as resizable panels, backed by the mp-splitter web component. Set orientation to horizontal or vertical, and nest splitters to build dock-style layouts.

Basic usage

Yellow background

Keyboard shortcuts

Tab — focus the next divider
← / → — resize a horizontal splitter by 10% (Shift: 1%)
↑ / ↓ — resize a vertical splitter by 10% (Shift: 1%)
Home — shrink the leading panel to its minimum size
End — grow the leading panel to its maximum size

Panel 1

Panel 2a

Panel 2b

Panel 2c

Sizing & events

minPanelSize caps how small a panel can be dragged (120px here), touchMode widens the divider hit area, and the resizeStart / resizing / resizeEnd outputs report the panel sizes in px. getPanelSizes() / setPanelSizes() / resizeDividerBy() drive the same machinery programmatically.

Touch mode (wider divider hit area)

Left (min 120px)

Right (min 120px)

Sizes: —

Last event: —