mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
7211d92f03
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
145 lines
4.1 KiB
Plaintext
145 lines
4.1 KiB
Plaintext
---
|
||
title: "Arborescence"
|
||
description: "Utilisez des composants arborescents pour afficher des structures hiérarchiques de fichiers et de dossiers."
|
||
keywords: ["tree", "file tree", "folder structure", "hierarchical navigation", "file system"]
|
||
---
|
||
|
||
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é.
|
||
|
||
<div id="basic-tree">
|
||
## Arborescence de base
|
||
</div>
|
||
|
||
<Tree>
|
||
<Tree.Folder name="app" defaultOpen>
|
||
<Tree.File name="layout.tsx" />
|
||
|
||
<Tree.File name="page.tsx" />
|
||
|
||
<Tree.File name="global.css" />
|
||
</Tree.Folder>
|
||
|
||
<Tree.Folder name="lib">
|
||
<Tree.File name="utils.ts" />
|
||
|
||
<Tree.File name="db.ts" />
|
||
</Tree.Folder>
|
||
|
||
<Tree.File name="package.json" />
|
||
|
||
<Tree.File name="tsconfig.json" />
|
||
</Tree>
|
||
|
||
```mdx Tree example
|
||
<Tree>
|
||
<Tree.Folder name="app" defaultOpen>
|
||
<Tree.File name="layout.tsx" />
|
||
<Tree.File name="page.tsx" />
|
||
<Tree.File name="global.css" />
|
||
</Tree.Folder>
|
||
<Tree.Folder name="lib">
|
||
<Tree.File name="utils.ts" />
|
||
<Tree.File name="db.ts" />
|
||
</Tree.Folder>
|
||
<Tree.File name="package.json" />
|
||
<Tree.File name="tsconfig.json" />
|
||
</Tree>
|
||
```
|
||
|
||
|
||
<div id="nested-folders">
|
||
## Dossiers imbriqués
|
||
</div>
|
||
|
||
Créez des structures profondément imbriquées en imbriquant des composants `Tree.Folder` les uns dans les autres.
|
||
|
||
<Tree>
|
||
<Tree.Folder name="app" defaultOpen>
|
||
<Tree.File name="layout.tsx" />
|
||
|
||
<Tree.File name="page.tsx" />
|
||
|
||
<Tree.Folder name="api" defaultOpen>
|
||
<Tree.Folder name="auth">
|
||
<Tree.File name="route.ts" />
|
||
</Tree.Folder>
|
||
|
||
<Tree.File name="route.ts" />
|
||
</Tree.Folder>
|
||
|
||
<Tree.Folder name="components">
|
||
<Tree.File name="button.tsx" />
|
||
|
||
<Tree.File name="dialog.tsx" />
|
||
|
||
<Tree.File name="tabs.tsx" />
|
||
</Tree.Folder>
|
||
</Tree.Folder>
|
||
|
||
<Tree.File name="package.json" />
|
||
</Tree>
|
||
|
||
```mdx Nested folders example
|
||
<Tree>
|
||
<Tree.Folder name="app" defaultOpen>
|
||
<Tree.File name="layout.tsx" />
|
||
<Tree.File name="page.tsx" />
|
||
<Tree.Folder name="api" defaultOpen>
|
||
<Tree.Folder name="auth">
|
||
<Tree.File name="route.ts" />
|
||
</Tree.Folder>
|
||
<Tree.File name="route.ts" />
|
||
</Tree.Folder>
|
||
<Tree.Folder name="components">
|
||
<Tree.File name="button.tsx" />
|
||
<Tree.File name="dialog.tsx" />
|
||
<Tree.File name="tabs.tsx" />
|
||
</Tree.Folder>
|
||
</Tree.Folder>
|
||
<Tree.File name="package.json" />
|
||
</Tree>
|
||
```
|
||
|
||
|
||
<div id="keyboard-navigation">
|
||
## Navigation au clavier
|
||
</div>
|
||
|
||
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.
|
||
|
||
<div id="properties">
|
||
## Propriétés
|
||
</div>
|
||
|
||
<div id="treefolder">
|
||
### Tree.Folder
|
||
</div>
|
||
|
||
<ResponseField name="name" type="string" required>
|
||
Le nom du dossier affiché dans l’arborescence.
|
||
</ResponseField>
|
||
|
||
<ResponseField name="defaultOpen" type="boolean" default="false">
|
||
Indique si le dossier est ouvert par défaut.
|
||
</ResponseField>
|
||
|
||
<ResponseField name="openable" type="boolean" default="true">
|
||
Indique si le dossier peut être ouvert et fermé. Réglez cette valeur sur false pour les dossiers non interactifs.
|
||
</ResponseField>
|
||
|
||
<div id="treefile">
|
||
### Tree.File
|
||
</div>
|
||
|
||
<ResponseField name="name" type="string" required>
|
||
Le nom du fichier affiché dans l'arborescence.
|
||
</ResponseField> |