Toolbar

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Symbolleiste, Werkzeugleiste, Funktionsspalte

Beschreibung: Die Toolbar-Komponente stellt eine Sammlung von Steuerelementen (Buttons und Links) dar, die in einer kompakten visuellen Form zusammengefasst sind. Sie ermöglicht es Nutzern, über Tastatursteuerung schnell zwischen den einzelnen Elementen zu navigieren und ist ideal für häufig genutzte Funktionen wie Formatierungswerkzeuge oder Navigationssteuerelemente.

Beispiel

Darstellung der Toolbar mit verschiedenen Steuerelementen (Buttons und Links):

<KolToolbar _items={[{"type":"button","_label":"Back","_hideLabel":true,"_icons":{"left":{"icon":"kolicon-chevron-left"}}},{"type":"button","_label":"Next","_hideLabel":true,"_icons":{"right":{"icon":"kolicon-chevron-right"}}},{"type":"link","_href":"#","_label":"Link"},{"type":"button","_label":"Button"}]} _label="Toolbar" />

Barrierefreiheit

Die Toolbar-Komponente wurde mit Fokus auf Barrierefreiheit entwickelt:

• Semantisches Label: Das Attribut _label dient als aria-label und beschreibt den Zweck der Toolbar für Screenreader-Nutzer.
• Fokusmanagement: Die Toolbar verwaltet den Fokus automatisch. Der erste aktive Element erhält standardmäßig den Fokus.
• Tastaturnavigation: Die Navigation zwischen den Elementen erfolgt über Pfeiltasten, was die Bedienbarkeit für Nutzer mit motorischen Einschränkungen verbessert.
• Orientierungsflexibilität: Durch die Möglichkeit, die Orientierung auf vertikal oder horizontal zu setzen, kann die Toolbar an verschiedene Anforderungen angepasst werden.
• Disabled-Status: Deaktivierte Elemente werden von der Tastaturnavigation übersprungen und sind für Screenreader erkennbar.

Links und Referenzen

Verwendung

Tastatursteuerung

Taste	Funktion
Tab	Fokussiert die Toolbar (oder springt zum nächsten Element, wenn bereits fokussiert).
Pfeil rechts	Bewegt den Fokus zum nächsten aktiven Element in der Toolbar (horizontal).
Pfeil links	Bewegt den Fokus zum vorherigen aktiven Element in der Toolbar (horizontal).
Pfeil unten	Bewegt den Fokus zum nächsten aktiven Element in der Toolbar (vertikal).
Pfeil oben	Bewegt den Fokus zum vorherigen aktiven Element in der Toolbar (vertikal).

Best Practices / Empfehlungen

• Sinnvolle Gruppierung: Nutzen Sie die Toolbar für zusammenhängende Funktionen, z. B. Formatierungswerkzeuge in einem Editor.
• Klare Labels: Geben Sie jeder Toolbar ein aussagekräftiges _label, das ihren Zweck beschreibt.
• Konsistente Orientierung: Wählen Sie eine Orientierung (horizontal oder vertikal) basierend auf dem verfügbaren Platz und der Nutzungsweise.
• Deaktivierte Elemente: Nutzen Sie _disabled für die Elemente in _items, um Funktionen zu deaktivieren, die in bestimmten Kontexten nicht verfügbar sind.
• Intuitive Reihenfolge: Ordnen Sie die Elemente in einer logischen Reihenfolge, die dem Workflow des Nutzers entspricht.
• Icons mit Labels: Verwenden Sie Icons in Kombination mit Labels oder Tooltips, um die Bedienbarkeit zu verbessern.

Anwendungsfälle

• Formatierungswerkzeuge: Textbearbeitung mit Funktionen wie Fettdruck, Kursiv, Unterstreichen
• Navigation: Schaltflächen für „Zurück" und „Weiter" in mehrstufigen Prozessen
• Dokumentesteuerung: Funktionen wie Speichern, Drucken, Exportieren
• Medienkontrolle: Play, Pause, Stop und weitere Kontrollen für Multimedia-Inhalte
• Datenbearbeitung: Aktionen wie Hinzufügen, Bearbeiten, Löschen von Datensätzen in Tabellen oder Listen

FAQ

Welches Element ist standardmäßig fokussiert?
Der erste aktive (nicht deaktivierte) Element in der _items-Array erhält standardmäßig den Fokus.

Kann ich die Reihenfolge der Elemente ändern?
Ja, die Reihenfolge wird durch die _items-Array definiert. Ändern Sie die Reihenfolge der Objekte in dem Array, um die Reihenfolge der Elemente zu ändern.

Wie deaktiviere ich einzelne Elemente?
Setzen Sie die _disabled-Eigenschaft auf true für das betreffende Element in der _items-Array.

Konstruktion / Technik

Playground

Testen Sie die verschiedenen Eigenschaften der Toolbar-Komponente:

<KolToolbar _items={[{"type":"button","_label":"Back","_hideLabel":true,"_icons":{"left":{"icon":"kolicon-chevron-left"}}},{"type":"button","_label":"Next","_hideLabel":true,"_icons":{"right":{"icon":"kolicon-chevron-right"}}},{"type":"link","_href":"#","_label":"Link"},{"type":"button","_label":"Button"}]} _label="Toolbar" />

Funktionalitäten (mit Code)

Grundlegende Toolbar mit mehreren Elementen

Eine Toolbar mit einer Sammlung von Button- und Link-Elementen:

<KolToolbar _items={[{"type":"button","_label":"Speichern","_icons":{"left":{"icon":"kolicon-save"}}},{"type":"button","_label":"Drucken","_icons":{"left":{"icon":"kolicon-printer"}}},{"type":"button","_label":"Löschen","_icons":{"left":{"icon":"kolicon-trash"}}}]} _label="Bearbeitungswerkzeuge" />

Orientierung

Die Toolbar kann horizontal (Standard) oder vertikal ausgerichtet werden:

<KolToolbar _items={[{"type":"button","_label":"Zurück","_hideLabel":true,"_icons":{"left":{"icon":"kolicon-chevron-up"}}},{"type":"button","_label":"Weiter","_hideLabel":true,"_icons":{"left":{"icon":"kolicon-chevron-down"}}}]} _label="Navigationssteuerung" _orientation="vertical" />

Deaktivierte Elemente

Einzelne Elemente können deaktiviert werden:

<KolToolbar _items={[{"type":"button","_label":"Fettdruck","_icons":{"left":{"icon":"kolicon-bold"}}},{"type":"button","_label":"Kursiv","_disabled":true,"_icons":{"left":{"icon":"kolicon-italic"}}},{"type":"button","_label":"Unterstreichen","_icons":{"left":{"icon":"kolicon-underline"}}}]} _label="Formatierungswerkzeuge" />

API

Properties

Property	Attribute	Description	Type	Default
_items (required)	--	Defines the functional elements of toolbar to render (e.g. kol-link, kol-button).	ToolbarItemPropType[]	undefined
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined
_orientation	_orientation	Defines whether the orientation of the component is horizontal or vertical.	"horizontal" | "vertical" | undefined	undefined

Methods

click

click() => Promise<void>

Triggers a click on the currently active toolbar item.

Returns

Type: Promise<void>

focus() => Promise<void>

Sets focus on the currently active toolbar item.

Returns

Type: Promise<void>

---