安装
用法
import { File, Folder, Tree } from "@/components/magicui/file-tree";
<Tree>
<Folder>
<Folder>
<File>layout.tsx</File>
<File>page.tsx</File>
</Folder>
</Folder>
</Tree>
属性
树形结构
| 属性 | 类型 | 默认值 | 描述 |
|---|
initialSelectedId | string | - | 初始选中项的ID。 |
indicator | 布尔值 | 是 | 是否显示树形指示线。 |
elements | TreeViewElement[] | - | 要渲染的树形视图元素数组。 |
initialExpandedItems | string[] | - | 初始应展开项的ID数组。 |
openIcon | React.ReactNode | - | 打开文件夹的自定义图标。 |
closeIcon | React.ReactNode | - | 关闭文件夹的自定义图标。 |
dir | "rtl" | "ltr" | "ltr" | 树形结构的文本方向。 |
文件夹
| 属性 | 类型 | 默认值 | 描述 |
|---|
element | string | - | 文件夹名称。 |
value | string | - | 文件夹的唯一标识符。 |
isSelectable | 布尔值 | 是 | 文件夹是否可被选择。 |
isSelect | 布尔值 | - | 文件夹当前是否已选择。 |
文件
| 属性 | 类型 | 默认值 | 描述 |
|---|
value | string | - | 文件的唯一标识符。 |
isSelectable | 布尔值 | 是 | 文件是否可被选择。 |
isSelect | 布尔值 | - | 文件当前是否已选择。 |
fileIcon | React.ReactNode | - | 文件的自定义图标。 |
| 属性 | 类型 | 默认值 | 描述 |
|---|
elements | TreeViewElement[] | - | 要控制的树形视图元素数组。 |
expandAll | 布尔值 | 否 | 是否初始展开所有元素。 |