Pharos
Navegar componentes
← Componentes

TreeList

TreeListExemplo
Estrutura de árvore expansível para exibir dados hierárquicos com linhas conectoras de ramificação. Use em exploradores de arquivos, navegadores de categorias aninhadas ou qualquer interface que visualize relações pai-filho.
Importação
import {TreeList} from '@pharos-ds/core/TreeList';

Exemplos

Área interativa

density
variant
Arquivos do projeto
  • src
    • components
      • Button.tsx
      • TextInput.tsx
    • hooks
  • package.json
Código
import {TreeList} from '@pharos-ds/core/TreeList';

<TreeList
  density="balanced"
  variant="lineGuides"
 />

Boas práticas

  • Faça: Forneça rótulos e ícones significativos para cada nó para facilitar a leitura da hierarquia.
  • Faça: Pré-expanda ramificações importantes para que os usuários vejam conteúdo-chave imediatamente.
  • Evite: Aninhe mais de 4–5 níveis de profundidade; achate a estrutura ou use outro padrão.
  • Evite: Use uma árvore para dados planos e não hierárquicos; use uma List em vez disso.

Props

Nenhuma prop documentada. Rode npx @pharos-ds/cli component TreeList.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/TreeList
TreeList · Pharos