Resizable

Layout

Two-pane split layout with draggable divider, horizontal or vertical direction.

Resizable — drag the divider to resize panels

Panel A

Drag the divider ↔

Panel B

This panel resizes too

Instalação via CLI

$ npx kikitocn add resizable

Interno:

@/lib/utils

Exemplo de uso

ResizableExample.tsx

import { Resizable } from "@/components/ui/cn/resizable/Resizable";

export function ResizableExample() {
  return (
    <Resizable />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children*`	`[ReactNode, ReactNode]`	—	Dois painéis a separar com divisor arrastável
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientação da divisão
`defaultSize`	`number`	`50`	Tamanho inicial do primeiro painel em %
`minSize`	`number`	`10`	Tamanho mínimo em %
`maxSize`	`number`	`90`	Tamanho máximo em %
`onResize`	`(size: number) => void`	`undefined`	Callback com tamanho atual em % ao arrastar

Carregando…