树 - Mintlify

使用树组件来展示层级结构，例如文件系统、项目目录或嵌套内容。Tree 组件支持键盘导航和无障碍访问特性。你可以使用 Markdown 列表或 Tree.Folder 与 Tree.File 组件来编写目录树。<Tree> 与 <FileTree> 是别名，任一标签都可搭配任一语法使用。

Markdown 列表语法

在 <FileTree>（或 <Tree>）中编写嵌套的 Markdown 列表来描述文件夹结构。在名称末尾加上斜杠表示文件夹，或在其下嵌套列表项。包含嵌套项的文件夹默认展开。

File tree example

<FileTree>

- docs/
  - index.mdx
  - guides/
    - configuration.mdx
- docs.config.ts

</FileTree>

在开始标签后和结束标签前各留一行空行，以便将列表解析为 Markdown。名称中的行内格式（如 `code`、**bold** 或 _italic_）会被去除，仅在能在你的构建中正确渲染时才使用。

基础目录结构

app

layout.tsx

page.tsx

global.css

lib

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

auth

route.ts

components

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

必填

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

快速入门

组织

自定义

创建内容

编写 API 文档

部署

优化

树

Markdown 列表语法

基础目录结构

嵌套文件夹

键盘导航

属性

Tree.Folder

Tree.File

​Markdown 列表语法

​基础目录结构

​嵌套文件夹

​键盘导航

​属性

​Tree.Folder

​Tree.File

Markdown 列表语法

基础目录结构

嵌套文件夹

键盘导航

属性

Tree.Folder

Tree.File