Baumstruktur

Tree zeigt Datei- und Ordnerhierarchien mit Auf- und Zuklappen sowie Tastaturnavigation an. Verwenden Sie es, um Projektstrukturen, Verzeichnislayouts oder den Ablageort von Dateien in einer Codebasis zu dokumentieren.

Verwenden Sie Tree, wenn:

Projektstruktur gezeigt werden soll in Einstiegsanleitungen
Dateiorganisation erklärt wird in Tutorials
CLI-Ausgabe dokumentiert wird, die Verzeichnisbäume zeigt
Veranschaulicht wird, wo Dateien hinzugefügt werden in Konfigurationsanleitungen

Verwendung

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

Grundlegende Tree-Komponente

src

package.json

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

Beispiel für eine Projektstruktur

Zeigen Sie Lesenden, wie ein Projekt nach der Einrichtung aussieht:

my-app

Tree im Vergleich zu Codeblöcken

Merkmal	Tree	Codeblock
Interaktiv	Ja (Auf-/Zuklappen)	Nein
Tastaturnavigation	Ja	Nein
Visuelle Hierarchie	Symbole + Einrückung	Nur Text
Am besten geeignet für	Dokumentation	Schnelle Inline-Verweise

Verwenden Sie Tree für die primäre Strukturdokumentation. Verwenden Sie Codeblöcke für schnelle Inline-Verweise wie „erstellen Sie src/index.ts“.

Tastaturnavigation

Navigieren Sie mit diesen Tasten durch den Baum:

Taste	Aktion
`Pfeil nach unten`	Zum nächsten Element wechseln
`Pfeil nach oben`	Zum vorherigen Element wechseln
`Pfeil nach rechts`	Ordner aufklappen oder zum ersten Unterelement wechseln
`Pfeil nach links`	Ordner zuklappen oder zum übergeordneten Element wechseln
`Pos1`	Zum ersten Element springen
`Ende`	Zum letzten sichtbaren Element springen
`Eingabe` / `Leertaste`	Ordner auf- bzw. zuklappen
Zeichen eingeben	Zum passenden Element springen

Props

TreeFolder

stringrequired

Im Baum angezeigter Ordnername.

booleandefault: false

Im aufgeklappten Zustand starten.

booleandefault: true

Gibt an, ob der Ordner umgeschaltet werden kann.

TreeFile

stringrequired

Im Baum angezeigter Dateiname.

Wie geht es weiter?

Übersicht Komponenten

Alle verfügbaren Komponenten durchsuchen

MDX-Grundlagen

Erfahren Sie, wie Komponenten in MDX verwendet werden