TreeView

Visão em árvore — mostra itens que ficam um dentro do outro, como pastas e arquivos ou categorias, para a pessoa abrir um ramo e escolher um item. Para uma lista simples, use uma lista ou um menu.

Padrão WAI-ARIA Tree ViewComponente clienteCódigo ↗

minimal · light · #3fa34d

Primeiros passos
- Crie sua conta
- Convide sua equipe
Cobrança

selectionMode

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele roda no cliente, porque guarda os ramos abertos e a seleção.

import { TreeView, TreeItem } from "@camaleo/react";

Anatomia

Uma lista de itens, em que o item com filhos abre um grupo aninhado. Cada parte tem um data-slot que você pode usar no CSS.

tree-view <ul>

tree-item <li>

tree-item-row <div>

tree-item-chevron · ramos

tree-item-spacer · folhas

tree-item-icon

tree-item-label

tree-item-meta · opcional

tree-group <ul> · quando aberto

tree-item <li>

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.

minimal · light · #3fa34d

src
- components
  - button.tsx
  - card.tsx
  - index.ts
- styles
package.json
README.md

Primeiros passos
Cobrança
- Troque de plano
- Baixe as notas fiscais

Aberta no item atual

Abra os ramos que levam ao item selecionado com defaultExpandedValues. A pessoa vê onde está sem clicar, e o Tab cai nesse item.

images
- hero-banner.png
- avatar-default.png
- logo-mark.svg
fonts

Vários itens de uma vez

Use selectionMode="multiple" quando a pessoa age sobre um lote, como mover arquivos. O Espaço adiciona ou tira um item e mantém os outros.

Produção
- Banco principal
- Réplica de leitura
- Cache

Ícones para o tipo de item

Passe icon quando os itens são de tipos diferentes, como servidores e bancos. O ícone fica oculto para leitores de tela, então o rótulo precisa dizer tudo.

public1.6 MB
- hero.webp1.2 MB
- logo.svg8 kB
- favicon.ico15 kB
package.json1.4 kB

Uma informação por linha

Use meta para um valor curto, como tamanho ou contagem. Leitores de tela leem junto com o rótulo, então use poucos caracteres.

app
- page.tsx
- layout.tsx
- api
package.json

Selecionado: app/page.tsx

Reagir à seleção

Clique em um arquivo ou aperte Enter nele. Controle selectedValues quando outra parte da página mostra o que foi escolhido, como um editor ou uma prévia.

Configurações

Conta
- Perfil
- Segurança
Notificações

Nomeada pelo título

Aponte aria-labelledby para o título visível, para o leitor de tela dizer o que a árvore contém. A árvore é uma parada de Tab; as setas andam dentro dela.

Em contexto

Árvores costumam ficar numa barra lateral ou num card, ao lado do conteúdo que abrem. Estas são peças inteiras de interface que você pode copiar, no estilo que escolheu.

Explorador

main

src
- app
  - page.tsxalterado
  - layout.tsx
- lib
next.config.mjs

Explorador de arquivosCard · TreeView · Badge

Categorias

Eletrônicos296
- Computadores200
  - Notebooks142
  - Desktops58
- Áudio96
Roupas84

Mostrando 142 produtos

Filtro por categoriaCard · TreeView · Button

Caixas de e-mail

Caixa de entrada12 não lidos
- Clientes9 não lidos
- Fornecedores3 não lidos
Enviados
Arquivo

Pastas de e-mailCard · TreeView · Badge

Boas práticas

Eletrônicos
- Computadores
- Áudio
Roupas

FaçaUse árvore para itens aninhados.

Pastas, categorias e seções com subseções são o motivo de existirem as setas de abrir e fechar.

Perfil
Notificações
Segurança

EviteÁrvore para uma lista simples.

Sem ramos, a árvore só acrescenta setas e anúncios à toa. Use uma lista, links ou um menu.

src
- components
  - button.tsx
  - card.tsx

FaçaRótulos curtos, o caminho nos ramos.

O ramo acima já diz onde o item está, então o rótulo só precisa do próprio nome.

src
- src/components
  - src/components/button.tsx
  - src/components/card.tsx

EviteO caminho inteiro em cada rótulo.

Rótulos longos são cortados em telas estreitas, e o leitor de tela repete as mesmas palavras em toda linha.

Props

PropriedadeTipoPadrãoDescrição

expandedValuesstring[]—Ramos abertos (controlado).

defaultExpandedValuesstring[][]Ramos abertos no início (não controlado).

onExpandedChange((values: string[]) => void)—Chamado com a nova lista quando um ramo abre ou fecha.

selectedValuesstring[]—Itens selecionados (controlado). O primeiro também é onde o Tab entra.

defaultSelectedValuesstring[][]Itens selecionados no início (não controlado). O primeiro também é onde o Tab entra.

onSelectedChange((values: string[]) => void)—Chamado com a nova lista quando a seleção muda.

selectionModeTreeSelectionMode"single""single" seleciona um item, "multiple" vários e "none" desliga a seleção.

Aceita também todas as props da primitiva por baixo e os atributos nativos.

PropriedadeTipoPadrãoDescrição

label*ReactNode—Texto visível da linha.

metaReactNode—Valor curto à direita, como tamanho ou contagem. É lido junto com o rótulo.

iconReactNode—Ícone no lugar da pasta ou do arquivo padrão.

Cada item precisa de um value único na árvore inteira, como o caminho: dois itens com o mesmo valor abrem e são selecionados juntos. TreeView também aceita os atributos de <ul>, e TreeItem os de <li>.

Styling hooks

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou na própria árvore.

Atributos

data-selectedem tree-item e tree-item-row, quando selecionado

data-expandedno tree-item de um ramo, quando aberto

data-valueo value do item, em tree-item

Tokens que ele lê

Cor

--cml-border--cml-border-control--cml-card-border--cml-card-shadow--cml-fg--cml-fg-secondary--cml-focus-offset--cml-focus-ring--cml-focus-width--cml-surface-raised

Forma e tamanho

--cml-border-width--cml-radius-control-sm--cml-radius-popover

Só deste componente

--cml-corner-shape--cml-tree-row-radius--cml-tree-selected-border--cml-tree-selected-fg--cml-tree-selected-shadow

Acessibilidade

TabEntra na árvore, no item selecionado, e sai dela. A árvore inteira é uma parada.

↓ / ↑Vai para o próximo item visível ou o anterior.

→Abre um ramo fechado. Num ramo aberto, vai para o primeiro filho.

←Fecha um ramo aberto. Num filho, volta para o pai.

Home / EndVai para o primeiro ou o último item visível.

EspaçoSeleciona o item. Com seleção múltipla, adiciona ou tira o item.

EnterFaz o mesmo que o Espaço e também abre ou fecha um ramo.

Relacionados

AccordionSeções que abrem e fecham, para conteúdo e não para uma lista de itens.Data tableLinhas e colunas com ordenação e filtros, para registros sem hierarquia.CardA superfície que costuma conter a árvore numa barra lateral ou num painel.

Esta página foi útil? · Editar esta página no GitHub