Tree

Synonyme: Hierarchische Liste, Navigationsbaum, Dateibaum

Beschreibung: 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.

Beispiel

Standard-Tree mit mehreren Ebenen und expandierbaren Elementen:

<KolTree _label="Sitemap" > <KolTreeItem _label="Home" _href="#/" _active /> <KolTreeItem _label="Page 1" _href="#/page-1" _open> <KolTreeItem _label="Page 1.1" _href="#/page-1/1" /> <KolTreeItem _label="Page 1.2" _href="#/page-1/2" /> </KolTreeItem> <KolTreeItem _label="Page 2" _href="#/page-2" /> </KolTree>

Barrierefreiheit

Die Tree-Komponente wurde mit Fokus auf Barrierefreiheit und Tastaturnavigation entwickelt:

• Hierarchische Navigation: Die Baumstruktur wird vollständig über die Tastatur bedienbar gemacht und ist für Screenreader-Nutzer verständlich strukturiert.
• ARIA-Rollen und -Attribute: Die Komponente nutzt die standardisierte Tree-Rolle der WAI-ARIA-Spezifikation, um die semantische Struktur korrekt zu vermitteln.
• Tastatursteuerung: Umfassende Tastaturunterstützung mit Arrow-Keys, Enter, Home/End für effiziente Navigation.
• Fokusmanagement: Klare Fokusindikatoren und vorhersehbare Fokusnavigation.
• Label-Anforderung: Jede Tree-Komponente benötigt ein Label via _label, um den Zweck für alle Nutzer deutlich zu machen.

Links und Referenzen

Verwendung

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.

Best Practices / Empfehlungen

• Verwenden Sie die Tree-Komponente für komplexe, hierarchisch aufgebaute Datenmengen, bei denen Elemente mehrere Verschachtelungsebenen haben können.
• Nutzen Sie _label auf der Tree-Komponente, um das Gesamtziel oder den Zweck des Baums zu beschreiben (z.B. "Seitenkarte", "Dateisystem", "Organisationsstruktur").
• Setzen Sie die Attribute _label, _href und optional _active auf jedem KolTreeItem (Kind-Komponente), um einzelne Baumeinträge zu konfigurieren.
• Nutzen Sie _open={true} auf Elementen, die Nutzer:innen sofort sehen sollen, etwa auf der obersten Ebene oder bei primären Navigationspunkten.
• Begrenzen Sie die initiale Tiefe der sichtbaren Ebenen, um die Übersicht zu bewahren – erlauben Sie das Ausklappen nach Bedarf.
• Verwenden Sie _active nur zur Markierung des aktuellen Standortes oder der Selektion, nicht zur visuellen Dekoration.
• Vermeiden Sie sehr lange _label-Texte, um die Lesbarkeit und das Responsive-Verhalten zu gewährleisten.

Anwendungsfälle

• Dateiverzeichnis-Navigation: Darstellung von Ordner- und Dateistrukturen mit erweiterbaren Ordnern.
• Navigationsmenüs: Hierarchisch strukturierte Seitenkarten oder Produktkataloge.
• Organisationsstrukturen: Darstellung von Hierarchien in Unternehmen oder Projektorganisationen.
• Content-Verwaltung: Baumstruktur von Kategorien und Unterkategorien in CMS oder Dokumentationssystemen.
• Dynamische Menüs: Navigationsmenüs, die sich je nach Benutzerrolle oder Kontext anpassen.
• Baumansichten für APIs: Darstellung von API-Dokumentationen oder Konfigurationsstrukturen.

FAQ

Kann ich die Tree-Komponente dynamisch laden (Lazy Loading)?
Die KoliBri Tree-Komponente selbst hat kein eingebautes Lazy-Loading. Sie können dieses Verhalten jedoch über JavaScript implementieren, indem Sie Items bei Bedarf hinzufügen oder entfernen, wenn ein Nutzer ein Element expandiert.

Wie viele Ebenen kann die Tree-Komponente verschachteln?
Technisch sind beliebig viele Ebenen möglich. Es wird jedoch empfohlen, die initiale Tiefe begrenzt zu halten, um Nutzer:innen nicht zu überlasten. Die Übersicht sollte bewahrt bleiben.

Kann ich die Tree-Komponente mit einem Filter verwenden?
Ja, Sie können Items dynamisch filtern und nur die gefilterten Items anzeigen – dies erfolgt jedoch auf Anwendungsebene durch Manipulation der übergebenen Daten.

Playground

Testen Sie die verschiedenen Eigenschaften der Tree-Komponente:

<KolTree _label="Sitemap" > <KolTreeItem _label="Home" _href="#/" _active /> <KolTreeItem _label="Page 1" _href="#/page-1" _open> <KolTreeItem _label="Page 1.1" _href="#/page-1/1" /> <KolTreeItem _label="Page 1.2" _href="#/page-1/2" /> </KolTreeItem> <KolTreeItem _label="Page 2" _href="#/page-2" /> </KolTree>

Funktionalitäten

Grundlegende Tree-Struktur

Jeder Baumknoten wird durch eine KolTreeItem-Komponente dargestellt. Der Container wird durch KolTree mit dem erforderlichen _label-Attribut definiert.

<KolTree _label="Sitemap" > <KolTreeItem _label="Home" _href="#/" _active /> <KolTreeItem _label="Page 1" _href="#/page-1" _open> <KolTreeItem _label="Page 1.1" _href="#/page-1/1" /> <KolTreeItem _label="Page 1.2" _href="#/page-1/2" /> </KolTreeItem> <KolTreeItem _label="Page 2" _href="#/page-2" /> </KolTree>

Verschachtelte Hierarchien

Die Tree-Komponente unterstützt beliebig viele Verschachtelungsebenen durch verschachtelte KolTreeItem-Elemente. Am KolTreeItem wird mit dem Attribut _open gesteuert, ob ein Element beim initialen Laden geöffnet ist und mit dem Attribut _active, ob ein Element markiert ist (z.B. die aktuelle Seite in einer Navigation).

<KolTree _label="Sitemap" > <KolTreeItem _label="Home" _href="#/" _active /> <KolTreeItem _label="Page 1" _href="#/page-1" _open> <KolTreeItem _label="Page 1.1" _href="#/page-1/1" /> <KolTreeItem _label="Page 1.2" _href="#/page-1/2" /> </KolTreeItem> <KolTreeItem _label="Page 2" _href="#/page-2" /> </KolTree>

API

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

Methods

focus

focus(options?: KolFocusOptions) => Promise<void>

Sets focus on the first focusable tree item.

Parameters

Name	Type	Description
options	KolFocusOptions | undefined

Returns

Type: Promise<void>

Slots

Slot	Description
	Children as TreeItem Components

---