Resizable

A resizable panel layout that supports multiple panels and collapse states.

Preview

Loading Preview...

bun add xiod-ui

1import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "xiod-ui/resizable";

1<ResizablePanelGroup>2  <ResizablePanel />3  <ResizableHandle />4  <ResizablePanel />5</ResizablePanelGroup>

Detailed documentation of properties and options.

Prop	Type	Default
`withHandle`	`boolean` \|`undefined`	`false`
`disabled`	`boolean` \|`undefined`	`false`
`disableDoubleClick`	`boolean` \|`undefined`	`false`

Prop	Type	Default
`id`	`string` \|`undefined`	-
`defaultSize`	`string` \|`number` \|`undefined`	-
`minSize`	`string` \|`number` \|`undefined`	`0%`
`maxSize`	`string` \|`number` \|`undefined`	`100%`
`collapsible`	`boolean` \|`undefined`	`false`
`collapsedSize`	`string` \|`number` \|`undefined`	`0%`
`disabled`	`boolean` \|`undefined`	`false`
`groupResizeBehavior`	`"preserve-relative-size"` \|`"preserve-pixel-size"` \|`undefined`	`preserve-relative-size`
`onResize`	`((size: { asPercentage: number; inPixels: number; }) => void)` \|`undefined`	-
`onCollapse`	`(() => void)` \|`undefined`	-
`onExpand`	`(() => void)` \|`undefined`	-
`panelRef`	`RefObject<ImperativePanelHandle` \|`null>` \|`undefined`	-

Prop	Type	Default
`direction`	`"horizontal"` \|`"vertical"` \|`undefined`	`horizontal`
`onLayoutChange`	`((layout: number[]) => void)` \|`undefined`	-
`onLayoutChanged`	`((layout: number[]) => void)` \|`undefined`	-
`defaultLayout`	`(string` \|`number)[]` \|`undefined`	-
`storageKey`	`string` \|`undefined`	-
`storage`	`{ getItem: (key: string) => string` \|`null; setItem: (key: string, value: string) => void; }` \|`undefined`	-
`groupRef`	`RefObject<ImperativeGroupHandle` \|`null>` \|`undefined`	-
`disabled`	`boolean` \|`undefined`	`false`