Components
Resizable
Panels with handles between them to drag, or to move with the arrow keys, within limits you set; groups nest, and the layout is reported to keep.
Import
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@rinzai/zen';Examples
Stacked
Three panels stacked, each with a smallest size: drag either line, or focus one and use ↑↓.
API reference
<ResizablePanelGroup>
Panels side by side (or stacked, orientation="vertical") with handles between them to drag, or to focus and move with the arrow keys. Sizes are percentages of the group; onLayout reports them all after each change, e.g. to keep for next time as the panels' defaultSize. Groups nest.
| Prop | Type | Default |
|---|---|---|
onLayoutEvery panel's size, in percent and in order, after each change. | ((sizes: number[]) => void) | — |
orientationSide by side (default), or stacked. | "horizontal" | "vertical" | horizontal |
<ResizablePanel>
One panel: defaultSize is a percentage of the group (those without one share what's left); minSize and maxSize bound it.
| Prop | Type | Default |
|---|---|---|
defaultSizeIts share of the group, in percent. | number | — |
maxSize | number | 100 |
minSize | number | 0 |
<ResizableHandle>
The boundary between two panels: a hairline that lights up while it's dragged, hovered or focused, with a wider grip than it looks. Arrow keys move it, Home and End take the panel before it to its smallest and largest.
No props of its own; it accepts the props of the element it renders.