UNPKG

@public-ui/components

Version:

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

public-ui.github.io

public-ui/kolibri

62 lines (38 loc) • 3.44 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
# Toolbar `preview` <kol-alert _type="warning" _variant="card"> <kol-badge _color="#476af5" _label="Preview"></kol-badge> 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. </kol-alert> 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. ```html <kol-toolbar _label="Label" _items="[{'_label': 'Button',},{'_href': '#','_label': 'Link'}]"> </kol-toolbar> ``` ### Beispiel <kol-toolbar _label="Label" _items="[{'_label': 'Button',},{'_href': '#','_label': 'Link'}]"> </kol-toolbar> ## 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 - <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role" _target="_blank"></kol-link> - <kol-link _href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/" _target="_blank"></kol-link> <!-- Auto Generated Below --> ## 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` | ----------------------------------------------