Arborescence

Tree affiche les hiérarchies de fichiers et de dossiers avec un développement/réduction interactif et une navigation au clavier complète. Il est conçu pour documenter les structures de projet, afficher les arborescences de répertoires ou expliquer où les fichiers doivent se trouver dans une base de code.

Utilisez Tree quand :

Afficher la structure du projet pour les guides de démarrage
Expliquer l'organisation des fichiers dans les tutoriels
Documenter la sortie CLI qui affiche des arborescences de répertoires
Illustrer où ajouter des fichiers dans les guides de configuration

Utilisation

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

Arborescence de base

src

package.json

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

Exemple de structure de projet

Montrez aux lecteurs à quoi ressemble un projet après la configuration :

my-app

Tree vs blocs de code

Fonctionnalité	Tree	Bloc de code
Interactif	Oui (développer/réduire)	Non
Navigation au clavier	Support complet	Non
Hiérarchie visuelle	Icônes + indentation	Texte uniquement
Idéal pour	Documentation	Références rapides en ligne

Utilisez Tree pour la documentation principale de structure. Utilisez des blocs de code pour des références rapides en ligne comme « créer src/index.ts ».

Le composant Tree prend en charge la navigation au clavier complète :

Touche	Action
`Arrow Down`	Passer à l'élément suivant
`Arrow Up`	Passer à l'élément précédent
`Arrow Right`	Développer le dossier ou passer au premier enfant
`Arrow Left`	Réduire le dossier ou passer au parent
`Home`	Aller au premier élément
`End`	Aller au dernier élément visible
`Enter` / `Space`	Basculer le développement/réduction du dossier
Saisir des caractères	Aller à l'élément correspondant

Props

TreeFolder

stringrequired

Nom du dossier affiché dans l'arborescence.

booleandefault: false

Démarrer en état développé.

booleandefault: true

Indique si le dossier peut être basculé.

TreeFile

stringrequired

Nom du fichier affiché dans l'arborescence.

Et ensuite ?

Vue d'ensemble des composants

Parcourir tous les composants disponibles

Bases MDX

Apprendre à utiliser les composants dans MDX