NavigationTreeView

A tree with the tree roles, a roving tabindex, arrow keys, typeahead and expand all.

import { NavigationTreeView } from '@zairakai/vue-components/Navigation'

Usage

<NavigationTreeView />

Example

• src
  • index.ts
  • utils.ts
• README.md

<script setup>
  import { ref } from 'vue'

  const selected = ref('a')
  const nodes = [
    {
      id: 'src',
      label: 'src',
      children: [
        { id: 'a', label: 'index.ts' },
        { id: 'b', label: 'utils.ts' },
      ],
    },
    { id: 'readme', label: 'README.md' },
  ]
</script>

<template>
  <NavigationTreeView
    v-model="selected"
    :nodes="nodes"
    label="Files"
    :expanded="['src']"
  />
</template>

Props

Name	Type	Default	Description
id	string
class	string
nodes	array	[]	The tree: { id, label, disabled, children }.
modelValue	string	undefined	The id of the selected node.
expanded	array	undefined	The ids of the open branches.
label	string

Events

Name	Description
update:modelValue
update:expanded
select

Slots

Name	Description
default

See Theming for the class hooks and the data-* state of the components.