Splitter
A component that divides your layout into resizable sections.
Features
- Supports keyboard interaction.
- Supports horizontal/vertical layout.
- Supports nested layout.
- Supports Right to Left direction.
- Can resize across another panel.
- Can be mounted conditionally.
Install
Import
API
Root
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
Group
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
autoSaveId | string | null |
direction | Direction | - |
id | string | - |
keyboardResizeBy | number | 10 |
storage | PanelGroupStorage | () => defaultStorage |
| Event | Type |
|---|---|
layout | [_layout: number[]] |
| Slot (default) | Type |
|---|---|
layout | number[] |
| Data attribute | Value |
|---|---|
[data-orientation] | 'vertical' | 'horizontal' |
[data-state] | 'collapsed' | 'expanded' | 'Present when collapsbile' |
Panel
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
collapsedSize | number | - |
collapsible | boolean | false |
defaultSize | number | false |
id | string | - |
maxSize | number | - |
minSize | number | - |
order | number | - |
| Event | Type |
|---|---|
collapse | [] |
expand | [] |
resize | [_size: number, _prevSize: number] |
| Slot (default) | Type |
|---|---|
isCollapsed | boolean |
isExpanded | boolean |
ResizeHandle
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
disabled | boolean | false |
hitAreaMargins | PointerHitAreaMargins | - |
id | string | - |
tabindex | number | 0 |
| Event | Type |
|---|---|
dragging | [_isDragging: boolean] |
| Data attribute | Value |
|---|---|
[data-orientation] | 'vertical' | 'horizontal' |
[data-disabled] | Present when disabled |
[data-state] | 'drag' | 'hover' | 'inactive' |