Note

This documentation describes the TreeView Vue component for native UI views for Xml templates see tree-view.

TreeView

A full-featured hierarchical tree with lazy loading, expand/collapse, single-node selection, and drag-and-drop reordering.

Import

import { TreeView } from '@neos/design-system'

Props

Data binding

Prop	Type	Default	Description
`source`	`Record<string, unknown>[]`	`[]`	Root-level nodes array
`captionProperty`	`string`	`''`	Property name for the node label
`iconProperty`	`string`	`''`	Property name for the node icon
`childrenProperty`	`string`	`''`	Property name for child nodes array

State property names (on each node object)

Prop	Type	Default	Description
`loadingProperty`	`string`	`'$loading'`	Marks a node as loading its children
`loadedProperty`	`string`	`'$loaded'`	Marks a node as having loaded its children
`selectedProperty`	`string`	`'$selected'`	Marks a node as selected
`expandedProperty`	`string`	`'$expanded'`	Marks a node as expanded
`visibleProperty`	`string`	`'$visible'`	Marks a node as visible
`draggableProperty`	`string`	`'$draggable'`	Marks a node as draggable

Node styling

Prop	Type	Default	Description
`nodeColor`	`string`	`undefined`	Text color for nodes
`nodeBackground`	`string`	`undefined`	Background color for nodes
`nodeHoverColor`	`string`	`undefined`	Text color on hover
`nodeHoverBackground`	`string`	`undefined`	Background color on hover
`activeNodeColor`	`string`	`undefined`	Text color for selected node
`activeNodeBackground`	`string`	`undefined`	Background for selected node
`activeNodeHoverColor`	`string`	`undefined`	Text color for hovered selected node
`activeNodeHoverBackground`	`string`	`undefined`	Background for hovered selected node

Event callbacks

Prop	Type	Description
`nodeLoad`	`(node) => Promise<void>`	Called when a node needs to lazy-load its children
`nodeExpand`	`(node) => void`	Called when a node is expanded
`nodeCollapse`	`(node) => void`	Called when a node is collapsed
`nodeClick`	`(node) => void`	Called when a node is clicked/selected
`nodeDragover`	`(args: TreeViewDragEventArgs) => boolean`	Return `true` to allow drop
`nodeDrop`	`(args: TreeViewDragEventArgs) => void`	Called when a node is dropped

Slots

Slot	Scope	Description
`header`	—	Content in a `HorizontalLayout` above the tree
`node`	`{ context }`	Custom rendering for each tree node

Usage Examples

Basic tree with lazy loading

const tree = ref([{ id: 1, name: 'Root', $expanded: false, $loaded: false, children: [] }])

async function loadNode(node) {
  node.$loading = true
  const children = await api.getChildren(node.id)
  node.children = children
  node.$loaded = true
  node.$loading = false
}

<TreeView
  :source="tree"
  caption-property="name"
  icon-property="icon"
  children-property="children"
  :node-load="loadNode"
  :node-click="(n) => selectNode(n)"
/>

Flat tree (pre-loaded, no lazy loading)

<TreeView :source="categories" caption-property="label" children-property="subcategories" />

Tree with drag-and-drop

<TreeView
  :source="items"
  caption-property="name"
  children-property="children"
  draggable-property="$draggable"
  :node-dragover="canDrop"
  :node-drop="handleDrop"
/>

Custom node rendering

<TreeView :source="files" caption-property="name" children-property="children">
  <template #node="{ context }">
    <HorizontalLayout space="small" vertical-align="center">
      <image :name="context.icon" size="small" />
      <Text>{{ context.name }}</Text>
      <Badge v-if="context.count" :value="context.count" />
    </HorizontalLayout>
  </template>
</TreeView>

Table of Contents