Ravox KitSurfaces
Resizable
Panels side by side or stacked with a divider that you can drag, move with the arrow keys and collapse with Enter. Each panel has a minimum and maximum, and sizes can be restored on the next visit.
Pastas
- Entrada
- Pedidos
- Suporte
- Arquivadas
Pedido #4821
Marina Rocha comprou o acesso anual
Pix de R$ 297,00 confirmado às 14:32. O acesso já foi liberado e o recibo saiu por e-mail.
Settings
Toggles
Examples
Editor and terminal, with onLayout
export default function Pagina() {
return <Landing />;
}pronto compilado em 412 ms
onLayout: arraste o handle
One inside the other
Camadas
Tela
Propriedades
Installation
The command creates components/ui/resizable.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add resizableProps
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Panels side by side or one above the other (Resizable). |
| storageKey | string | — | Saves the sizes in localStorage and restores them later (Resizable). |
| onLayout | (sizes: number[]) => void | — | On releasing the divider or changing by keyboard, with the sizes in % in order (Resizable). |
| defaultSize | number | — | Initial size in %. Without it, splits what is left with the other panels (ResizablePanel). |
| minSize / maxSize | number | 10 / 100 | Limits in % (ResizablePanel). |
| withHandle | boolean | false | Shows the grip in the middle of the line, for people who don't know it can be dragged (ResizableHandle). |
| label | string | "Resize panels" | Name of the divider for screen readers (ResizableHandle). |