For Tailwind CSS v3 docs, click here.

文件树

用于显示目录的文件夹和文件结构的组件。

通过 CLI 安装

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://registry.inspira-ui.com/file-tree.json"

手动安装

在同一个文件中,复制并粘贴以下代码:

Tree.vue
Folder.vue
File.vue
TreeIndicator.vue
index.ts

API

Tree

The Tree component serves as a container for displaying a hierarchical file/folder structure.

Props

Prop 名称类型默认值描述
classstring-Additional classes for styling the tree container.
initialSelectedIdstring-ID of the initially selected item.
indicatorbooleantrueWhether to show the tree indicator line.
elementsTreeViewElement[]-Array of tree elements to display.
initialExpandedItemsstring[]-Array of IDs of initially expanded folders.
openIconstring"lucide:folder-open"Icon to show for open folders.
closeIconstring"lucide:folder"Icon to show for closed folders.
fileIconstring"lucide:file"Icon to show for files.
direction"rtl" | "ltr""ltr"Text direction of the tree.

用例

MyComponent.vue
<Tree initialSelectedId="1" :initial-expanded-items="['1', '2']" :elements="ELEMENTS">
  <!-- Your structure here -->
</Tree>

Folder and File

The Folder and File components represent folders and files in the file tree. Folders can contain other Folder and File components.

Props

Prop 名称类型默认值描述
classstring-Additional classes for custom styling.
idstring-Unique identifier for the item.
namestring-Display name of the folder/file.
isSelectablebooleantrueWhether the item can be selected.
isSelectbooleanfalseWhether the item is currently selected.

用例

MyComponent.vue
<Folder id="1" name="root">
  <Folder id="2" name="components">
    <File id="3" name="Button.vue" />
    <File id="4" name="Card.vue" />
  </Folder>
</Folder>

感谢