Albero

Tree visualizza gerarchie di file e cartelle con espansione e compressione interattive e navigazione completa da tastiera. È progettato per documentare strutture di progetto, mostrare layout di directory o spiegare dove collocare i file in una codebase.

Usa Tree per:

Mostrare la struttura del progetto nelle guide introduttive
Spiegare l'organizzazione dei file nei tutorial
Documentare l'output della CLI che mostra alberi di directory
Illustrare dove aggiungere i file nelle guide di configurazione

Utilizzo

<Tree>
  <TreeFolder name="src" defaultOpen>
    <TreeFile name="index.ts" />
  </TreeFolder>
</Tree>

Albero di base

src

package.json

<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 l'aspetto di un progetto dopo la configurazione:

my-app

Albero e blocchi di codice

Funzionalità	Tree	Blocco di codice
Interattivo	Sì (espansione/compressione)	No
Navigazione da tastiera	Supporto completo	No
Gerarchia visiva	Icone + rientro	Solo testo
Ideale per	Documentazione	Riferimenti rapidi in linea

Usa Tree per documentare la struttura principale. Usa i blocchi di codice per riferimenti rapidi in linea, come "crea src/index.ts".

Navigazione da tastiera

Il componente Tree supporta la navigazione completa da tastiera:

Tasto	Azione
`Arrow Down`	Passa all'elemento successivo
`Arrow Up`	Passa all'elemento precedente
`Arrow Right`	Espande la cartella o passa al primo elemento figlio
`Arrow Left`	Comprimi la cartella o passa all'elemento padre
`Home`	Vai al primo elemento
`End`	Vai all'ultimo elemento visibile
`Enter` / `Space`	Attiva o disattiva l'espansione della cartella
Digita caratteri	Vai all'elemento corrispondente

Proprietà

TreeFolder

stringrequired

Nome della cartella visualizzato nell'albero.

booleandefault: false

Avvia nello stato espanso.

booleandefault: true

Indica se la cartella può essere attivata o disattivata.

TreeFile

stringrequired

Nome del file visualizzato nell'albero.

Prossimi passi

Panoramica dei componenti

Esplora tutti i componenti disponibili

Nozioni di base su MDX

Scopri come usare i componenti in MDX