Resizable
Split-pane layout with drag-to-resize handles. Compose ResizablePanelGroup with ResizablePanel children and ResizableHandle between them.
Default
Two-pane horizontal split.
Vertical
Stack panels with direction="vertical".
With handle
Nested groups with visible drag handles via withHandle on each ResizableHandle.
API Reference
Props, events, and slots for each sub-component.
ResizablePanelGroup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | "horizontal" | "vertical" | "horizontal" | Split axis. |
| autoSaveId | string | — | Persist layout to localStorage under this key. |
Events
| Event | Description |
|---|---|
| layout | Fires with the array of panel sizes whenever the layout changes. |
ResizablePanel
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultSize | number | — | Initial size percentage (0-100). |
| minSize | number | — | Minimum size percentage. |
| maxSize | number | — | Maximum size percentage. |
| collapsible | boolean | false | Allow the panel to collapse past minSize. |
Events
| Event | Description |
|---|---|
| resize | Fires with the new size when this panel is resized. |
| collapse | Fires when the panel collapses. |
| expand | Fires when the panel expands from a collapsed state. |
ResizableHandle
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| withHandle | boolean | false | Render a visible drag handle marker. |
Events
| Event | Description |
|---|---|
| dragging | Fires with a boolean as the handle starts and stops dragging. |