Components
ResizablePanels
Drag-to-resize split layout in a horizontal or vertical direction.
ResizablePanels is the container for a split layout the user can resize by
dragging. Set direction to 'horizontal' or 'vertical', then nest
Panel regions separated by a
PanelHandle. Pass an autoSaveId to persist
the user's chosen sizes across reloads. Use it for editor split views, sidebars,
and dashboards. Built on react-resizable-panels.
Example
Preview
import { ResizablePanels, Panel, PanelHandle } from '@officina/ui';
<ResizablePanels direction="horizontal" autoSaveId="editor">
<Panel defaultSize={30}>Sidebar</Panel>
<PanelHandle />
<Panel>Editor</Panel>
</ResizablePanels>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| direction* | enum | — | |
| autoSaveId | string | — |