Árvore
Exiba hierarquias de arquivos e pastas com expansão/recolhimento interativos e navegação completa pelo teclado, ideal para documentar estruturas de projetos.
Tree exibe hierarquias de arquivos e pastas com expansão/recolhimento interativos e navegação completa pelo teclado. Ele foi projetado para documentar estruturas de projetos, mostrar layouts de diretórios ou explicar onde os arquivos devem ser colocados em uma base de código.
Use Tree para:
- Mostrar a estrutura do projeto em guias de introdução
- Explicar a organização dos arquivos em tutoriais
- Documentar a saída da CLI que mostra árvores de diretórios
- Ilustrar onde adicionar arquivos em guias de configuração
Uso
<Tree>
<TreeFolder name="src" defaultOpen>
<TreeFile name="index.ts" />
</TreeFolder>
</Tree>Árvore básica
<Tree>
<TreeFolder name="src" defaultOpen>
<TreeFile name="index.ts" />
<TreeFile name="config.ts" />
</TreeFolder>
<TreeFile name="package.json" />
</Tree>Exemplo de estrutura de projeto
Mostre aos leitores como um projeto fica após a configuração:
Tree versus blocos de código
| Recurso | Tree | Bloco de código |
|---|---|---|
| Interativo | Sim (expansão/recolhimento) | Não |
| Navegação pelo teclado | Suporte completo | Não |
| Hierarquia visual | Ícones + indentação | Apenas texto |
| Ideal para | Documentação | Referências rápidas em linha |
Use Tree para a documentação principal da estrutura. Use blocos de código para referências rápidas em linha, como "crie src/index.ts".
Navegação pelo teclado
O componente Tree oferece suporte completo à navegação pelo teclado:
| Tecla | Ação |
|---|---|
Arrow Down | Mover para o próximo item |
Arrow Up | Mover para o item anterior |
Arrow Right | Expandir a pasta ou mover para o primeiro item filho |
Arrow Left | Recolher a pasta ou mover para o item pai |
Home | Ir para o primeiro item |
End | Ir para o último item visível |
Enter / Space | Alternar a expansão/recolhimento da pasta |
| Digitar caracteres | Ir para o item correspondente |
Props
TreeFolder
Nome da pasta exibido na árvore.
Inicia no estado expandido.
Indica se a pasta pode ser alternada.
TreeFile
Nome do arquivo exibido na árvore.