Albero
Visualizza gerarchie di file e cartelle con espansione/compressione interattiva e navigazione da tastiera. Ideale per documentare la struttura dei progetti.
Tree mostra gerarchie di file e cartelle con espansione/compressione e navigazione da tastiera. Usalo per documentare strutture di progetto, layout di directory o la posizione dei file in una codebase.
Usa Tree quando:
- Mostri la struttura del progetto nelle guide introduttive
- Spieghi l'organizzazione dei file nei tutorial
- Documenti l'output della CLI che mostra alberi di directory
- Illustri dove aggiungere i file nelle guide di configurazione
Utilizzo
<Tree>
<TreeFolder name="src" defaultOpen>
<TreeFile name="index.ts" />
</TreeFolder>
</Tree>Albero di base
<Tree>
<TreeFolder name="src" defaultOpen>
<TreeFile name="index.ts" />
<TreeFile name="config.ts" />
</TreeFolder>
<TreeFile name="package.json" />
</Tree>Esempio di struttura del progetto
Mostra ai lettori come appare un progetto dopo la configurazione:
Albero e blocchi di codice
| Caratteristica | Tree | Blocco di codice |
|---|---|---|
| Interattivo | Sì (espansione/compressione) | No |
| Navigazione da tastiera | Sì | No |
| Gerarchia visiva | Icone + indentazione | Solo testo |
| Ideale per | Documentazione | Riferimenti rapidi in linea |
Usa Tree per la documentazione della struttura principale. Usa i blocchi di codice per riferimenti rapidi in linea come "crea src/index.ts".
Navigazione da tastiera
Spostati nell'albero con questi tasti:
| Tasto | Azione |
|---|---|
Arrow Down | Passa all'elemento successivo |
Arrow Up | Passa all'elemento precedente |
Arrow Right | Espandi la cartella o passa al primo figlio |
Arrow Left | Comprimi la cartella o passa al genitore |
Home | Vai al primo elemento |
End | Vai all'ultimo elemento visibile |
Enter / Space | Attiva/disattiva l'espansione della cartella |
| Caratteri digitati | Vai all'elemento corrispondente |
Proprietà
TreeFolder
Nome della cartella visualizzato nell'albero.
Inizia nello stato espanso.
Indica se la cartella può essere attivata/disattivata.
TreeFile
Nome del file visualizzato nell'albero.