Documentation
Asgard
Getting started
Theming
Guides
Inputs & forms
Pickers
Data display
Layout & docking
Feedback & overlays
Navigation & chrome
Layout & docking
Resizable panes with draggable gutters.
A resizable split-pane layout that divides its container into sections separated by draggable gutters.
Key features:
- Horizontal or vertical split directions
- Flexible sizing: pixels,
Nfrfractions,N%percentages, orflex minSizes/maxSizesconstraints per pane- Nestable for complex multi-directional layouts
Loading preview…
When to use it
- IDE-style sidebars and editors
- Master / detail layouts
- Adjustable dashboards
- Fixed (non-resizable) split layouts
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'horizontal' | 'vertical' | 'horizontal' | Split orientation: horizontal panes sit left/right, vertical panes stack top/bottom. |
sizes | Array<number | string> | — | Initial size per pane: number = pixels, "Nfr" = fraction, "N%" = percentage, "flex" = grow. Must match the child count. |
minSizes | number[] | — | Minimum pixel size per pane. |
maxSizes | number[] | — | Maximum pixel size per pane. |
resizable | boolean | true | Enable draggable gutters between panes. |
gutterSize | number | — | Thickness of the draggable gutter in pixels. |
gutterStyle | CSSProperties | — | Inline style override for the gutters. |
onResize | (sizes: Array<number | string>) => void | — | Fired while dragging when resizable is true. |
children | ReactNode | — | One child element per pane. |
Notes
- The number of entries in sizes / minSizes / maxSizes must match the number of children.
- Splitters nest: put a vertical Splitter inside a horizontal pane for an IDE-style layout.
Presets