Tree

Synonyme: List, Navigation

Die Tree-Komponente stellt eine hierarchische Liste dar, in der jedes Element untergeordnete Einträge enthalten kann. Elemente mit Kindelementen lassen sich ein- oder ausklappen, um die untergeordnete Ebene anzuzeigen oder auszublenden.

Code

<kol-tree _label="Sitemap">
 <kol-tree-item _label="Home" _href="#" _active></kol-tree-item>
 <kol-tree-item _label="Page 1" _href="#" _open>
  <kol-tree-item _label="Subpage 1" _href="#" _open>
   <kol-tree-item _label="Product 1" _href="#"></kol-tree-item>
   <kol-tree-item _label="Product 2" _href="#"></kol-tree-item>
   <kol-tree-item _label="Product 3" _href="#"></kol-tree-item>
   <kol-tree-item _label="Product 4" _href="#"></kol-tree-item>
  </kol-tree-item>
  <kol-tree-item _label="Subpage 2" _href="#"></kol-tree-item>
  <kol-tree-item _label="Subpage 3" _href="#"></kol-tree-item>
  <kol-tree-item _label="Subpage 4" _href="#"></kol-tree-item>
 </kol-tree-item>
 <kol-tree-item _label="Page 2" _href="#"></kol-tree-item>
</kol-tree>

Beispiel

Verwendung

Die Tree-Komponente wird verwendet, um komplexe, hierarchisch aufgebaute Daten visuell darzustellen und benutzerfreundlich navigierbar zu machen. Sie ermöglicht es Nutzerinnen und Nutzern, sich effizient durch verschachtelte Strukturen zu bewegen und liefert dabei eine klare Übersicht über die Beziehungen zwischen über- und untergeordneten Elementen.

Typische Einsatzbereiche sind z. B. Navigationsleisten, Organisationsstrukturen, Dateiverzeichnisse oder Produktkataloge – überall dort, wo Inhalte strukturiert und mehrstufig angezeigt werden sollen.

Jeder Navigationspunkt wird über das Attribut _label beschriftet und kann optional über _href mit einem Ziel verlinkt werden. Mit dem Attribut _active lässt sich ein Element als aktuell aktiv markieren, während _open steuert, ob ein Element beim initialen Laden aufgeklappt ist.

Tastatursteuerung

Taste	Funktion
Tab	Fokussiert die Tree-Komponente, sodass sie per Tastatur bedient werden kann.
↑ / ↓	Navigiert zwischen sichtbaren Elementen auf derselben Ebene.
→	Öffnet das Untermenü des aktuell fokussierten Elements (sofern vorhanden).
←	Schließt das Untermenü (sofern geöffnet) oder verschiebt den Fokus auf das übergeordnete Element.
Enter	Aktiviert das aktuell fokussierte Element. Wenn ein _href-Attribut vorhanden ist, erfolgt eine Navigation zum Ziel.
Pos1	Fokussiert das erste Element der Tree-Komponente.
Ende	Fokussiert das letzte Element der Tree-Komponente.
*	Öffnet alle geschlossenen Geschwisterelemente auf der aktuell fokussierten Ebene.
Alphanumerisch	Durch Eingabe eines Buchstabens wird das nächste Element fokussiert, dessen _label mit diesem Zeichen beginnt. Bei wiederholtem Drücken desselben Buchstabens wird zum jeweils nächsten passenden Element weitergesprungen.

Links und Referenzen

Properties

Property	Attribute	Description	Type	Default
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined

---

Beispiel ansehen