TreeView

Display

Interactive hierarchical tree with expand/collapse and selection.

Props

Prop	Type	Default	Description
`nodes`	`DsTreeNode[]`	`[]`	Nodes { id, label, children?, disabled? }. Recursive.
`selected`	`string`	`undefined`	ID of the selected node.

Examples

File tree

src
package.json

vue

<script setup>
const nodes = [
  {
    id: 'src',
    label: 'src',
    children: [
      {
        id: 'components',
        label: 'components',
        children: [
          { id: 'button', label: 'DsButton.vue' },
          { id: 'input', label: 'DsInput.vue' },
        ],
      },
      { id: 'utils', label: 'utils', children: [
        { id: 'cn', label: 'cn.ts' },
      ]},
    ],
  },
  { id: 'package', label: 'package.json' },
]
const selected = ref('button')
</script>
<template>
  <DsTreeView :nodes="nodes" :selected="selected" @select="selected = $event" />
</template>

Skeleton

Use DsTreeViewSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsTreeViewSkeleton />

Accessibility

role="tree" on the container, role="treeitem" on each node.
aria-expanded reflects the expand/collapse state of folders.

Timeline

VisuallyHidden