E
简单文档
组件特性

File Tree

展示目录结构、文件层级和高亮文件的树形组件。

Usage

app/
docs/
::file-tree
---
tree:
  - app:
    - components:
      - Header.vue
      - Footer.vue
    - composables:
      - useErrorHandler.ts
    - ^app.vue^ # This is highlighted
  - docs:
    - index.md
---
::

Customizations

File Tree Title
components
::file-tree
---
title: File Tree Title
icon: lucide:folder-tree
autoSlash: false   # Whether to add a slash after every folder automatically
showArrow: true    # Whether to show the collapse arrow
tree:
  - components:
    - layout:
      - Header.vue
      - Footer.vue
      - ...
    - content:
      - Accordion.vue
      - Alert.vue
      - ProseCode.vue
      - ...
---
::

Disable Icons

app/
docs/
::file-tree
---
showIcon: false
tree:
  - app:
    - components:
      - Header.vue
      - Footer.vue
    - composables:
      - useErrorHandler.ts
    - ^app.vue^
  - docs:
    - index.md
---
::

Diff

app/
docs/
::file-tree
---
showIcon: false
tree:
  - app:
    - + components:
      - Header.vue
      - "- Footer.vue"
    - composables:
      - useErrorHandler.ts
    - ^app.vue^
  - docs:
    - index.md
---
::

Props

tree
The file tree
title
string
File tree title
icon
string
File tree title icon
autoSlash
boolean
Whether to add a slash after every folder automatically
showArrow
boolean
Whether to show the collapse arrow
showIcon
boolean
Whether to show file & folder icons