Skip to content
v1.0
Components

Tree

Hierarchy you can walk with the arrow keys — sources containing layers containing sublayers, where depth is information. One widget, one focus, arbitrarily deep: the WAI-ARIA tree pattern, keyboard included.

Anatomy

  • Cadastre
  • Lot boundaries
  • Easements
  • Survey marks
  • Aerial imagery
Live. Click a chevron and the branch opens WITHOUT selecting; click a label and it selects without toggling. Focus a row and use the arrows: Up/Down walk visible rows at any depth, Right opens or steps in, Left closes or steps out, Home and End jump.
Code 
<GdTree
  v-model="selected"
  v-model:expanded="open"
  :nodes="catalogue"
  label="Layer catalogue"
/>

Selected: lots · open branches: cadastre

Tree, nav or accordion

  • A tree is one WIDGET — one tab stop, arrows inside, roving tabindex. Reach for it when the hierarchy is the content: a layer catalogue, a folder structure.
  • GdSideNav owns destinations, capped at one level on purpose — a nav needing three levels is an information-architecture problem. A tree is for data that genuinely nests.
  • GdAccordion stacks independent panels. Its items do not know about each other; a tree's rows are one structure with one selection.
  • Selection is not expansion. The chevron toggles without selecting, the label selects without toggling — "look inside" and "act on" are different intents, and a catalogue needs both.
  • A disabled row stays visible and keeps its place under the arrows' walk, the same doctrine as everywhere else in the system.

API

Props

PropTypeDefault
nodesrequiredGdTreeNode[]—

The hierarchy: `{ id, label, icon?, disabled?, children? }`, recursive.

labelrequiredstring—

The accessible name. A tree with no name is announced as just "tree".

modelValuestring—

`v-model` — the selected node's id.

expandedstring[][]

`v-model:expanded` — which branches are open.

Slots

row

Extra content on the right of every row — a count, a visibility toggle. Receives { node }.

Events

select[node: GdTreeNode]

A row was selected. The model has already moved.

Navigate

Esc