Splitter
A draggable gutter between two (or more) panels. Pointer events from mouse / touch / pen are normalized; the gutter emits resize-start / resizing / resize-end with the current panel sizes as CSS px.
Keyboard shortcuts
- Tab — focus the next divider (each one is a
role="separator" tab stop reporting its position as aria-valuenow) - ← / → — resize a horizontal splitter by 10% (Shift: 1%)
- ↑ / ↓ — resize a vertical splitter by 10% (Shift: 1%)
- Arrows across the splitter's other axis are ignored
- Home — shrink the leading panel to its minimum size
- End — grow the leading panel until the trailing one hits its minimum
Horizontal split
Left pane
Right pane