跳转到主要内容
使用树组件来展示层级结构，例如文件系统、项目目录或嵌套内容。Tree 组件支持键盘导航和无障碍访问特性。

​
基础目录结构

app
layout.tsx
page.tsx
global.css
package.json
tsconfig.json
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>

​
嵌套文件夹

通过将 Tree.Folder 组件相互嵌套来创建深层级结构。
app
layout.tsx
page.tsx
api
route.ts
package.json
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>

​
键盘导航

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

​
属性

​
Tree.Folder

​
name
string
必填
在树形结构中显示的文件夹名称。
​
defaultOpen
boolean
默认值:"false"
文件夹是否在默认情况下展开。
​
openable
boolean
默认值:"true"
文件夹是否可以展开和收起。对于不可交互的文件夹，将其设置为 false。

​
Tree.File

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