mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
7211d92f03
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
145 lines
3.6 KiB
Plaintext
145 lines
3.6 KiB
Plaintext
---
|
||
title: "树"
|
||
description: "使用树组件展示层级的文件和文件夹结构。"
|
||
keywords: ["树", "文件树", "文件夹结构", "层级导航", "文件系统"]
|
||
---
|
||
|
||
使用树组件来展示层级结构，例如文件系统、项目目录或嵌套内容。Tree 组件支持键盘导航和无障碍访问特性。
|
||
|
||
<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="keyboard-navigation">
|
||
## 键盘导航
|
||
</div>
|
||
|
||
Tree 组件支持键盘导航。
|
||
|
||
- **方向键**：在可见条目之间向上或向下移动。
|
||
- **右箭头**：展开关闭的文件夹，或移动到已展开文件夹的第一个子项。
|
||
- **左箭头**：收起已展开的文件夹，或移动到父级文件夹。
|
||
- **Home**：跳转到 Tree 中的第一个条目。
|
||
- **End**：跳转到 Tree 中最后一个可见条目。
|
||
- **Enter/空格**：切换文件夹的展开/收起状态。
|
||
- **\***：展开当前层级的所有同级文件夹。
|
||
- **前瞻式搜索**：输入字符以跳转到以这些字符开头的条目。
|
||
|
||
<div id="properties">
|
||
## 属性
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<div id="treefile">
|
||
### Tree.File
|
||
</div>
|
||
|
||
<ResponseField name="name" type="string" required>
|
||
在树状视图中显示的文件名。
|
||
</ResponseField> |