API REFERENCE · LAYOUT
<dj-split-panel>
Two resizable panes with a draggable divider between them.
Put the panes in the start and end slots. position is the start pane's share of the space, as a percent from 0 to 100. The host needs a size, because the panes fill it: for a horizontal split, give it a height.
npm install @dojo-ng/split-panel
import "@dojo-ng/split-panel";Layout
orientation="horizontal"(the default) puts the panes side by side with a vertical divider.verticalstacks them with a horizontal divider.- The panes always divide in the ratio
position: (100 −position). - Minimum pane sizes come from CSS, not from properties: set
--dj-split-panel-min-startand--dj-split-panel-min-endin any length unit, and dragging stops at that size. - The order follows the writing direction, so in a right-to-left page the start pane is on the right with no extra work.
- The divider bar is drawn by the component. Put custom grip content in the optional
dividerslot. - For three panes, nest a second
dj-split-panelinside a slot of the first.
Resizing
- Drag the divider with a mouse, a trackpad, or touch.
- Or focus the divider and use the keyboard, so resizing never requires dragging (WCAG 2.5.7): the arrow keys move it by 1 (Shift: by 10), Home moves it to 0, and End to 100. A horizontal split uses Left and Right in the reading direction; a vertical split uses Up and Down.
dj-repositionfires when the split settles: once when a drag ends, and once per key press.
Accessibility
- The divider has
role="separator", witharia-valuenow,aria-valuemin, andaria-valuemaxtrackingposition. - Its
aria-orientationis the divider's own direction, so a horizontal split has a vertical separator.
Properties
| Property | Attribute | Type | Default |
|---|---|---|---|
orientationLayout axis. horizontal = panes side by side (vertical divider); vertical = stacked. |
orientation reflected |
"horizontal""vertical" |
"horizontal" |
positionThe start pane's share of the host, as a percent (0–100). |
position reflected |
number |
50 |
disabledWhen set, the divider is inert (no drag, no keyboard, not a tab stop). |
disabled reflected |
boolean |
false |
Events
| Event | Description |
|---|---|
dj-reposition | detail { position } |
Slots
startdividerend
CSS parts
Style these with dj-split-panel::part(name).
startenddivider
CSS custom properties
| Property | Default | Description |
|---|---|---|
--dj-split-panel-min-start | 0 | Minimum size of the start pane (any length). |
--dj-split-panel-min-end | 0 | Minimum size of the end pane (any length). |
--dj-split-panel-divider-width | 4px | Thickness of the divider bar. |
--dj-split-panel-divider-color | var(--dj-color-border) | Divider bar color. |