Components
Panel
A single resizable region inside ResizablePanels, with per-panel scroll control.
Panel is one region within a ResizablePanels
group. Size it with defaultSize, minSize, and maxSize (percentages), and
control its own overflow with the scroll prop (hidden default, auto, x,
or y). Separate adjacent panels with a
PanelHandle so users can drag the boundary.
Example
Preview
import { ResizablePanels, Panel, PanelHandle } from '@officina/ui';
<ResizablePanels direction="horizontal">
<Panel defaultSize={40} minSize={20} scroll="y">
Navigation
</Panel>
<PanelHandle />
<Panel>Content</Panel>
</ResizablePanels>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| collapsedSize | string | number | — | Panel size when collapsed; defaults to 0%. |
| collapsible | boolean | — | This panel can be collapsed. ℹ️ A collapsible panel will collapse when it's size is less than of the specified `minSize` |
| defaultSize | string | number | — | Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels. ⚠️ Percentage based sizes may cause slight layout shift when server-rendering. For more information see the documentation. |
| disabled | boolean | — | When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel). |
| elementRef | Ref<HTMLDivElement | null> | — | Ref attached to the root `HTMLDivElement`. |
| groupResizeBehavior | enum | — | How should this Panel behave if the parent Group is resized? Defaults to `preserve-relative-size`. - `preserve-relative-size`: Retain the current relative size (as a percentage of the Group) - `preserve-pixel-size`: Retain its current size (in pixels) ℹ️ Panel min/max size constraints may impact this behavior. ⚠️ A Group must contain at least one Panel with `preserve-relative-size` resize behavior. |
| maxSize | string | number | — | Maximum size of Panel within its parent group; defaults to 100%. |
| minSize | string | number | — | Minimum size of Panel within its parent group; defaults to 0%. |
| onResize | ((panelSize: PanelSize, id: string | number, prevPanelSize: PanelSize) => void) | undefined | — | Called when panel sizes change. @param panelSize Panel size (both as a percentage of the parent Group and in pixels) @param id Panel id (if one was provided as a prop) @param prevPanelSize Previous panel size (will be undefined on mount) |
| panelRef | Ref<PanelImperativeHandle | null> | — | Exposes the following imperative API: - `collapse(): void` - `expand(): void` - `getSize(): number` - `isCollapsed(): boolean` - `resize(size: number): void` ℹ️ The `usePanelRef` and `usePanelCallbackRef` hooks are exported for convenience use in TypeScript projects. |
| scroll | enum | hidden |