Skip to main content
Utilisez des composants arborescents pour afficher des structures hiérarchiques comme des systèmes de fichiers, des répertoires de projet ou du contenu imbriqué. Le composant d’arborescence prend en charge la navigation au clavier et les fonctionnalités d’accessibilité. Vous pouvez créer des arborescences avec une liste Markdown ou avec les composants Tree.Folder et Tree.File. <Tree> et <FileTree> sont des alias : chaque balise fonctionne avec l’une ou l’autre des syntaxes. Utilisez la syntaxe de liste Markdown pour des arborescences rapides et statiques dont chaque dossier peut se développer par défaut. Utilisez la syntaxe des composants lorsque vous devez contrôler l’état d’ouverture par dossier avec defaultOpen, marquer des dossiers comme non interactifs avec openable, ou mélanger des fichiers et des dossiers à une profondeur arbitraire.

​
Syntaxe de liste Markdown

Écrivez une liste Markdown imbriquée dans <FileTree> (ou <Tree>) pour décrire une structure de dossiers. Ajoutez une barre oblique à la fin pour indiquer un dossier, ou imbriquez des éléments en dessous. Les dossiers qui contiennent des éléments imbriqués sont développés par défaut.
docs
index.mdx
guides
configuration.mdx
docs.config.ts
File tree example
Laissez une ligne vide après la balise d’ouverture et avant la balise de fermeture pour que la liste soit interprétée comme du Markdown. Les mises en forme en ligne telles que `code`, **gras** ou _italique_ sont supprimées des noms ; ne les utilisez que si elles s’affichent correctement dans votre build.

​
Arborescence de base

app
layout.tsx
page.tsx
global.css
package.json
tsconfig.json
Tree example

​
Dossiers imbriqués

Créez des structures profondément imbriquées en imbriquant des composants Tree.Folder les uns dans les autres.
app
layout.tsx
page.tsx
api
route.ts
package.json
Nested folders example

​
Mettre en évidence le chemin actif

Ajoutez la prop highlight à Tree.File ou Tree.Folder pour marquer l’élément actuel. Utilisez-la pour attirer l’attention sur un fichier ou un dossier auquel vous faites référence dans le texte voisin, comme le fichier que le lecteur doit ouvrir ensuite. Mettre en évidence un dossier teinte également ses descendants, afin que le chemin actif se distingue même lorsque le dossier est développé.
app
layout.tsx
page.tsx
api
route.ts
package.json
Highlighted tree example

​
Personnaliser la couleur de mise en évidence

La couleur de mise en évidence est exposée via la variable CSS --tree-highlight. Définissez-la sur le composant racine Tree pour redéfinir la couleur de cette arborescence.
Couleur de mise en évidence personnalisée
Le composant d’arborescence prend en charge la navigation au clavier.
  • Flèches directionnelles : Parcourir les éléments visibles vers le haut et vers le bas.
  • Flèche droite : Développer un dossier fermé ou passer au premier élément enfant d’un dossier ouvert.
  • Flèche gauche : Réduire un dossier ouvert ou passer au dossier parent.
  • Home : Aller au premier élément de l’arborescence.
  • End : Aller au dernier élément visible de l’arborescence.
  • Entrée/Espace : Basculer l’état ouvert/fermé d’un dossier.
  • * : Développer tous les dossiers au même niveau.
  • Recherche par saisie anticipée (type-ahead) : Taper des caractères pour passer aux éléments qui commencent par ces caractères.

​
Propriétés

​
Tree.Folder

​
string
requis
Le nom du dossier affiché dans l’arborescence.
​
boolean
défaut:"false"
Indique si le dossier s’ouvre par défaut.
​
boolean
défaut:"true"
Indique si les utilisateurs peuvent ouvrir et fermer le dossier. Réglez cette valeur sur false pour les dossiers non interactifs.
​
boolean
défaut:"false"
Indique si le dossier est mis en évidence comme élément actif. Les descendants sont également teintés pour renforcer le chemin actif.

​
Tree.File

​
string
requis
Le nom du fichier affiché dans l’arborescence.
​
boolean
défaut:"false"
Indique si le fichier est mis en évidence comme élément actif.