Ravox KitNavegação
Tree View
Tree view de arquivos e pastas, seções de um documento ou categorias aninhadas. Setas abrem, fecham e andam, uma letra pula para o item, e cada linha pode ter um detalhe e uma ação no fim. Segue o padrão da WAI-ARIA.
src
components
botao.tsx2 kB
cartao.tsx4 kB
page.tsx6 kB
public
logo.png18 kB
README.md
Ajustes
Ligar e desligar
Exemplos
Só as pastas de cima abertas
src
components
page.tsx6 kB
public
README.md
Instalação
O shadcn cria components/ui/arvore.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/tree-view.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| itens | NoArvore[] | — | { id, rotulo, icone?, detalhe?, acao?, filhos?, desabilitado? }. Com `filhos`, o item vira pasta. |
| rotulo | string | — | Nome da árvore para leitores de tela. |
| valor | string | null | — | Item escolhido (controlado). |
| padrao | string | null | — | Item escolhido no começo (sem controlar). |
| aoSelecionar | (id: string) => void | — | Chamado ao escolher um item (pastas abrem e fecham). |
| abertosPadrao | string[] | todas | Pastas que começam abertas. |
| densidade | "normal" | "compacta" | "normal" | Altura das linhas: 32px ou 28px. |