树
使用 Tree 以交互方式展开和折叠文件、文件夹层级，并支持键盘导航，适用于项目结构文档。
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 等快速内联引用，请使用代码块。
键盘导航
Tree 组件支持完整的键盘导航：
| 按键 | 操作 |
|---|---|
Arrow Down | 移动到下一项 |
Arrow Up | 移动到上一项 |
Arrow Right | 展开文件夹或移动到第一个子项 |
Arrow Left | 折叠文件夹或移动到父级 |
Home | 跳转到第一项 |
End | 跳转到最后一个可见项 |
Enter / Space | 切换文件夹的展开/折叠状态 |
| 输入字符 | 跳转到匹配的项目 |
属性
TreeFolder
在树中显示的文件夹名称。
初始为展开状态。
文件夹是否可以切换展开状态。
TreeFile
在树中显示的文件名称。