mintlify__docs/zh/components/tree.mdx

---
title: "树"
description: "使用树组件显示带有可折叠节点和路径名语法高亮的层级文件与文件夹结构。"
keywords: ["树", "文件树", "文件夹结构", "层级导航", "文件系统"]
boost: 3
---

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

你可以使用 Markdown 列表或 `Tree.Folder` 与 `Tree.File` 组件来编写目录树。`<Tree>` 与 `<FileTree>` 是别名，任一标签都可搭配任一语法使用。

如果你需要快速、静态的目录树且每个文件夹都默认可展开，使用 Markdown 列表语法。如果你需要通过 `defaultOpen` 逐个控制文件夹的展开状态、使用 `openable` 将文件夹标记为不可交互，或在任意层级混合文件与文件夹，则使用组件语法。

<div id="markdown-list-syntax">
  ## Markdown 列表语法
</div>

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

<FileTree>

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

</FileTree>

````mdx File tree example
<FileTree>

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

</FileTree>
````

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

<div id="basic-tree">
  ## 基础目录结构
</div>

<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>

```mdx 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>
```


<div id="nested-folders">
  ## 嵌套文件夹
</div>

通过将 `Tree.Folder` 组件相互嵌套来创建深层级结构。

<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>

```mdx 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>
```


<div id="highlight-the-active-path">
  ## 突出显示当前路径
</div>

在 `Tree.File` 或 `Tree.Folder` 上添加 `highlight` prop 以标记当前条目。当你在附近正文中引用某个文件或文件夹（例如读者接下来应打开的文件）时，使用它来吸引注意。

突出显示某个文件夹时也会为其后代着色，即使文件夹处于展开状态，当前路径仍然清晰可辨。

<Tree>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="layout.tsx" />

    <Tree.File name="page.tsx" highlight />

    <Tree.Folder name="api" defaultOpen highlight>
      <Tree.File name="route.ts" />
    </Tree.Folder>
  </Tree.Folder>

  <Tree.File name="package.json" />
</Tree>

```mdx Highlighted tree example
<Tree>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="layout.tsx" />
    <Tree.File name="page.tsx" highlight />
    <Tree.Folder name="api" defaultOpen highlight>
      <Tree.File name="route.ts" />
    </Tree.Folder>
  </Tree.Folder>
  <Tree.File name="package.json" />
</Tree>
```

### 自定义高亮颜色

高亮颜色通过 `--tree-highlight` CSS 变量暴露。在 `Tree` 根组件上设置该变量以覆盖该目录树的颜色。

```mdx 自定义高亮颜色
<Tree style={{ "--tree-highlight": "rgb(59 130 246)" }}>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="page.tsx" highlight />
  </Tree.Folder>
</Tree>
```


<div id="keyboard-navigation">
  ## 键盘导航
</div>

Tree 组件支持键盘导航。

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

<div id="properties">
  ## 属性
</div>

<div id="tree">
  ### Tree
</div>

<ResponseField name="className" type="string">
  应用于树容器的额外 CSS 类。
</ResponseField>

<div id="treefolder">
  ### Tree.Folder
</div>

<ResponseField name="name" type="string" required>
  在树形结构中显示的文件夹名称。
</ResponseField>

<ResponseField name="defaultOpen" type="boolean" default="false">
  文件夹是否默认展开。
</ResponseField>

<ResponseField name="openable" type="boolean" default="true">
  用户是否可以展开和收起该文件夹。对于不可交互的文件夹，将其设置为 false。
</ResponseField>

<ResponseField name="highlight" type="boolean" default="false">
  文件夹是否作为当前条目突出显示。其后代也会被着色以强化当前路径。
</ResponseField>

<div id="treefile">
  ### Tree.File
</div>

<ResponseField name="name" type="string" required>
  在树状视图中显示的文件名。
</ResponseField>

<ResponseField name="highlight" type="boolean" default="false">
  文件是否作为当前条目突出显示。
</ResponseField>