Resizable Panels

Панели с изменяемым размером. Бесплатно, MIT · Навигация и каркас › Каркас

Установка

npx valyro-cli@latest add resizable-panels

npx shadcn@latest add https://valyro.xyz/r/resizable-panels.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { ResizablePanels } from 'valyro-ui';

Prop	Type	Default
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	`horizontal` puts panels side by side (following the reading direction); `vertical` stacks them.
`layout`	`number[]`		Panel sizes in percent, in panel order. Controlled: pair with `onLayout`.
`onLayout`	`(layout: number[]) => void`		Called with the new sizes on every drag step, key press, collapse or expand, and when a saved layout is restored.
`autoSaveId`	`string`		Remembers the layout in localStorage under this id and restores it on mount (after hydration).
`keyboardStep`	`number`	`2`	Percent an arrow key moves a focused handle; Shift moves five times as far.

ResizablePanels.Panel (ResizablePanel), ResizablePanels.Handle (ResizableHandle)