Tree

Tree zeigt Datei- und Ordnerhierarchien mit interaktivem Ein-/Ausklappen und vollständiger Tastaturnavigation an. Die Komponente eignet sich für die Dokumentation von Projektstrukturen, die Darstellung von Verzeichnislayouts oder die Erklärung, wo Dateien in einer Codebasis abgelegt werden sollen.

Verwenden Sie Tree zum:

• Darstellen von Projektstrukturen in Anleitungen für den Einstieg
• Erklären der Dateiorganisation in Tutorials
• Dokumentieren von CLI-Ausgaben, die Verzeichnisbäume anzeigen
• Veranschaulichen, wo Dateien hinzugefügt werden in Konfigurationsanleitungen

Verwendung

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

Grundlegende Tree-Komponente

<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 Lesern, wie ein Projekt nach der Einrichtung aussieht:

Tree im Vergleich zu Codeblöcken

Verwenden Sie Tree für die primäre Dokumentation von Strukturen. Verwenden Sie Codeblöcke für schnelle Inline-Referenzen wie „create src/index.ts“.

Tastaturnavigation

Die Tree-Komponente unterstützt die vollständige Tastaturnavigation:

Props

TreeFolder

TreeFile

Wie geht es weiter?