树形结构
以可交互的展开/折叠方式展示文件与文件夹层级，支持键盘导航。适用于项目结构文档。
Tree 以展开/折叠和键盘导航的方式展示文件与文件夹层级。可用于记录项目结构、目录布局，或说明代码库中文件的存放位置。
在以下场景使用 Tree：
- 展示项目结构，用于入门指南
- 说明文件组织方式，用于教程
- 记录 CLI 输出中的目录树
- 说明应在何处添加文件，用于配置指南
用法
<Tree>
<TreeFolder name="src" defaultOpen>
<TreeFile name="index.ts" />
</TreeFolder>
</Tree>基础 Tree
src
package.json
<Tree>
<TreeFolder name="src" defaultOpen>
<TreeFile name="index.ts" />
<TreeFile name="config.ts" />
</TreeFolder>
<TreeFile name="package.json" />
</Tree>项目结构示例
向读者展示完成设置后项目的样子：
my-app
Tree 与代码块
| 特性 | Tree | 代码块 |
|---|---|---|
| 可交互 | 是（展开/折叠） | 否 |
| 键盘导航 | 是 | 否 |
| 视觉层级 | 图标 + 缩进 | 仅文本 |
| 最适合 | 文档 | 快速内联参考 |
主要的结构文档请使用 Tree；如"创建 src/index.ts"这类快速内联参考则使用代码块。
键盘导航
使用以下按键在树中移动：
| 按键 | 操作 |
|---|---|
Arrow Down | 移动到下一项 |
Arrow Up | 移动到上一项 |
Arrow Right | 展开文件夹或移动到第一个子项 |
Arrow Left | 折叠文件夹或移动到父级 |
Home | 跳到第一项 |
End | 跳到最后一个可见项 |
Enter / Space | 切换文件夹的展开/折叠状态 |
| 输入字符 | 跳到匹配的项 |
属性
TreeFolder
树中显示的文件夹名称。
初始为展开状态。
文件夹是否可以切换展开/折叠。
TreeFile
树中显示的文件名称。