Skip to main content
A component used to showcase the folder and file structure of a directory.

​
Usage

<script setup lang="ts">
import { Tree, Folder, File } from '@/components/visualization'

const elements = [
  {
    id: '1',
    name: 'src',
    children: [
      { id: '2', name: 'components' },
      { id: '3', name: 'utils.ts' },
    ],
  },
]
</script>

<template>
  <Tree :elements="elements" />
</template>

​
API

​
Tree Component

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

​
Props

Prop NameTypeDefaultDescription
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.

​
Folder and File Components

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

​
Props

Prop NameTypeDefaultDescription
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.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us