Components
PanelHandle
Draggable divider placed between Panels to resize a ResizablePanels group.
PanelHandle is the draggable separator that sits between two
Panel regions in a
ResizablePanels group. Dragging it
reallocates space between the neighboring panels. It comes pre-styled with a
grip indicator and hover, focus, and active states, and orients itself
automatically to the group's direction. Place one between every pair of panels.
Example
Preview
import { ResizablePanels, Panel, PanelHandle } from '@officina/ui';
<ResizablePanels direction="horizontal">
<Panel>Left</Panel>
<PanelHandle />
<Panel>Right</Panel>
</ResizablePanels>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | — | When disabled, the separator cannot be used to resize its neighboring panels. ℹ️ The panels may still be resized indirectly (while other panels are being resized). To prevent a panel from being resized at all, it needs to also be disabled. |
| disableDoubleClick | boolean | — | When true, double-clicking this `Separator` will not reset its `Panel` to its default size. |
| elementRef | Ref<HTMLDivElement> | — | Ref attached to the root `HTMLDivElement`. |