---
title: 树
description: 使用 Tree 以交互方式展开和折叠文件、文件夹层级，并支持键盘导航，适用于项目结构文档。
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Tree 显示文件和文件夹层级，支持交互式展开和折叠，以及完整的键盘导航。它适用于记录项目结构、展示目录布局，或说明代码库中应放置文件的位置。

在以下情况下使用 Tree：
- **展示项目结构**，用于入门指南
- **说明文件组织方式**，用于教程
- **记录 CLI 输出**，用于展示目录树
- **说明文件添加位置**，用于配置指南

## 用法

```mdx
<Tree>
  <TreeFolder name="src" defaultOpen>
    <TreeFile name="index.ts" />
  </TreeFolder>
</Tree>
```

## 基础 Tree

<Tree>
  <TreeFolder name="src" defaultOpen>
    <TreeFile name="index.ts" />
    <TreeFile name="config.ts" />
  </TreeFolder>
  <TreeFile name="package.json" />
</Tree>

```mdx
<Tree>
  <TreeFolder name="src" defaultOpen>
    <TreeFile name="index.ts" />
    <TreeFile name="config.ts" />
  </TreeFolder>
  <TreeFile name="package.json" />
</Tree>
```

## 项目结构示例

向读者展示项目完成设置后的结构：

<Tree>
  <TreeFolder name="my-app" defaultOpen>
    <TreeFolder name="src" defaultOpen>
      <TreeFile name="index.ts" />
      <TreeFile name="config.ts" />
    </TreeFolder>
    <TreeFile name="package.json" />
    <TreeFile name="README.md" />
  </TreeFolder>
</Tree>

## Tree 与代码块

| 功能 | Tree | 代码块 |
|---------|------|------------|
| 交互性 | 支持（展开/折叠） | 不支持 |
| 键盘导航 | 完整支持 | 不支持 |
| 视觉层级 | 图标 + 缩进 | 仅文本 |
| 最适用场景 | 文档 | 快速内联引用 |

使用 Tree 记录主要结构。对于 `src/index.ts` 等快速内联引用，请使用代码块。

## 键盘导航

Tree 组件支持完整的键盘导航：

| 按键 | 操作 |
|-----|--------|
| `Arrow Down` | 移动到下一项 |
| `Arrow Up` | 移动到上一项 |
| `Arrow Right` | 展开文件夹或移动到第一个子项 |
| `Arrow Left` | 折叠文件夹或移动到父级 |
| `Home` | 跳转到第一项 |
| `End` | 跳转到最后一个可见项 |
| `Enter` / `Space` | 切换文件夹的展开/折叠状态 |
| 输入字符 | 跳转到匹配的项目 |

## 属性

### TreeFolder

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

<ParamField name="defaultOpen" type="boolean" default="false">
  初始为展开状态。
</ParamField>

<ParamField name="openable" type="boolean" default="true">
  文件夹是否可以切换展开状态。
</ParamField>

### TreeFile

<ParamField name="name" type="string" required>
  在树中显示的文件名称。
</ParamField>

## 下一步

<Columns cols={2}>
  <Card title="组件概览" icon="puzzle-piece" href="/cn/components/overview">
    浏览所有可用组件
  </Card>
  <Card title="MDX 基础" icon="file-code" href="/cn/content/mdx-basics">
    了解如何在 MDX 中使用组件
  </Card>
</Columns>