Baum (Tree View)
Hierarchische Baum-Ansicht (Ordner/Strukturen, max. 6 Ebenen): Zweige klappen per Controller, Blätter emittieren select — Chevron dreht, aktiver Knoten hervorgehoben
Nutzt: ui.icon
Beispiele
Struktur-Baum (Zweige klicken zum Klappen)
- Produkte
- Elektronik
- Notebooks.csv
- Zubehör.csv
- Möbel
- Elektronik
- Kunden
- B2B
- B2C
- README.md
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| nodes * | array | — | Knoten (rekursiv: label, icon?, href?, active?, open?, children?) |
* Pflicht-Prop
Events & Slots
Events:
⚡ navigate⚡ select — im Surface per on: {<event>: {action, params}} verdrahtbar.
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--tree-focus-ring-color | var(--focus-ring-color) |
--tree-focus-ring-offset | var(--focus-ring-offset) |
--tree-focus-ring-width | var(--focus-ring-width) |
--tree-radius-control | var(--radius-control) |
--tree-surface-sunken | var(--color-surface-sunken) |
--tree-text-default | var(--color-text-default) |
--tree-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
color.surface.sunkencolor.text.defaultcolor.text.linkcolor.text.mutedduration.fasteasing.standardfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultradius.controlsize.1size.2size.4size.5text.mdweight.semibold