安装
使用
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 | boolean | true | 是否显示树形指示线。 |
elements | TreeViewElement[] | - | 要渲染的树视图元素数组。 |
initialExpandedItems | string[] | - | 应初始展开的项的ID数组。 |
openIcon | React.ReactNode | - | 打开文件夹的自定义图标。 |
closeIcon | React.ReactNode | - | 关闭文件夹的自定义图标。 |
dir | "rtl" | "ltr" | "ltr" | 树的文本方向。 |
文件夹
| 属性 | 类型 | 默认值 | 描述 |
|---|
element | string | - | 文件夹的名称。 |
当前值 | string | - | 文件夹的唯一标识符。 |
isSelectable | boolean | true | 文件夹是否可选。 |
isSelect | boolean | - | 文件夹当前是否选中。 |
文件
| 属性 | 类型 | 默认值 | 描述 |
|---|
当前值 | string | - | 文件的唯一标识符。 |
isSelectable | boolean | true | 文件是否可选。 |
isSelect | boolean | - | 文件当前是否选中。 |
fileIcon | React.ReactNode | - | 文件的自定义图标。 |
| 属性 | 类型 | 默认值 | 描述 |
|---|
elements | TreeViewElement[] | - | 要控制的树视图元素数组。 |
expandAll | boolean | false | 是否初始展开所有元素。 |