TreeView

Expandable hierarchy with icons and a selected node. The size prop (xs, sm, md, lg, xl) sets the row height and font size.

Jump to API reference

Import

Vue

import { UiTreeView } from '@ziyarago/ui/vue'

Destinations

Vue

<UiTreeView
  selected="haram"
  :nodes="[{ id: 'ksa', label: 'Saudi Arabia', icon: 'globe', children: [{ id: 'makkah', label: 'Makkah', icon: 'map-pin', children: [{ id: 'haram', label: 'Masjid al-Haram', icon: 'landmark' }, { id: 'hira', label: 'Cave Hira' }] }, { id: 'madinah', label: 'Madinah', icon: 'map-pin', children: [{ id: 'nabawi', label: 'Masjid an-Nabawi', icon: 'landmark' }] }] }]"
 />

Sizes

Vue

<UiTreeView
  :nodes="[{ id: 'ksa', label: 'Saudi Arabia', icon: 'globe', children: [{ id: 'makkah', label: 'Makkah', icon: 'map-pin' }] }]"
  size="xs"
 />

<UiTreeView
  :nodes="[{ id: 'ksa', label: 'Saudi Arabia', icon: 'globe', children: [{ id: 'makkah', label: 'Makkah', icon: 'map-pin' }] }]"
  size="sm"
 />

<UiTreeView
  :nodes="[{ id: 'ksa', label: 'Saudi Arabia', icon: 'globe', children: [{ id: 'makkah', label: 'Makkah', icon: 'map-pin' }] }]"
  size="md"
 />

<UiTreeView
  :nodes="[{ id: 'ksa', label: 'Saudi Arabia', icon: 'globe', children: [{ id: 'makkah', label: 'Makkah', icon: 'map-pin' }] }]"
  size="lg"
 />

<UiTreeView
  :nodes="[{ id: 'ksa', label: 'Saudi Arabia', icon: 'globe', children: [{ id: 'makkah', label: 'Makkah', icon: 'map-pin' }] }]"
  size="xl"
 />

API reference

Expandable tree of nodes for hierarchies such as folders, categories or regions.

Props

PropType and valuesDefaultDescription

nodesrequired{ id: string; label: string; icon?: string; children?: Node[] }[][]Root nodes. children nest recursively; icon is an icon name. Ids must be unique.

selectedstring—Id of the highlighted node.

sizexssmmdlgxl'md'Row height and font size.

Events

Vue: @name. React: onName.

selectCalled with the node id when a node is clicked. Nodes with children also toggle open.

Notes

The first level is open by default; deeper levels start collapsed.