Skip to main content
使用树组件来展示层级结构,例如文件系统、项目目录或嵌套内容。Tree 组件支持键盘导航和无障碍访问特性。

基础目录结构

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

嵌套文件夹

通过将 Tree.Folder 组件相互嵌套来创建深层级结构。
app
layout.tsx
page.tsx
api
route.ts
package.json
Nested folders example

键盘导航

Tree 组件支持键盘导航。
  • 方向键:在可见条目之间向上或向下移动。
  • 右箭头:展开关闭的文件夹,或移动到已展开文件夹的第一个子项。
  • 左箭头:收起已展开的文件夹,或移动到父级文件夹。
  • Home:跳转到 Tree 中的第一个条目。
  • End:跳转到 Tree 中最后一个可见条目。
  • Enter/空格:切换文件夹的展开/收起状态。
  • *:展开当前层级的所有同级文件夹。
  • 前瞻式搜索:输入字符以跳转到以这些字符开头的条目。

属性

Tree.Folder

string
必填
在树形结构中显示的文件夹名称。
boolean
默认值:"false"
文件夹是否默认展开。
boolean
默认值:"true"
用户是否可以展开和收起该文件夹。对于不可交互的文件夹,将其设置为 false。

Tree.File

string
必填
在树状视图中显示的文件名。