Resizable

Layout

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

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 direction="horizontal" />
  );
}

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
`className`	`string`	—	Classes extras pro container raiz
`style`	`CSSProperties`	—	Estilos inline pro container raiz

Voltar para Layout

Carregando…