Toolbar

preview

Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.

Die Komponente Toolbar ist eine Sammlung häufig verwendeter Steuerelemente für Schaltflächen und Links, die in einer kompakten visuellen Form zusammengefasst sind. Die Toolbar ist in der Regel eine Untermenge von Funktionen, die in einer Menüleiste zu finden sind, um den Aufwand für den Benutzer zu verringern.

<kol-toolbar _label="Label" _items="[{'_label': 'Button',},{'_href': '#','_label': 'Link'}]"> </kol-toolbar>

Beispiel

Verwendung

Verwenden Sie die Toolbar-Komponente wenn die Navigation von verschiedenen Buttons und Links ermöglicht werden soll, z.B. um den Inhalt einer Textarea zu formatieren. Mit Hilfe des Attributs _label kann das aria-label gesetzt werden. Über das Attribut _items werden die einzelnen Funktionen in der Toolbar gesetzt. Der tabIndex wird von der Toolbar-Komponente gesteuert. Default ist hierbei immer das erste aktive Elemente in der Toolbar.

Unterstützte Toolbar-Komponenten

• Link
• Button

Die Toolbar-Komponente erkennt hierbei selbständig durch das _href-Attribut, ob es sich um eine Link- oder Button-Komponente handelt.

Barrierefreiheit

Tastatursteuerung

Taste	Funktion
Tab	Erster Tab fokussiert die Toolbar. Zweiter das erste aktive Element und dritter setzt den Standard wieder her.
Pfeil-Tasten	Können für die Navigation der Element in der fokussierten Toolbar verwendet werden.

Links und Referenzen

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 semantic aria-label of the component.	string	undefined

---

Beispiel ansehen