UNPKG

@public-ui/components

Version:

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

public-ui.github.io

public-ui/kolibri

99 lines (61 loc) • 5.63 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
# LinkGroup Die **LinkGroup**-Komponente bildet einen umfassenden Container für eine vertikale oder horizontale Liste von Links. Sie rendert eine auf Barrierefreiheit optimierte Liste von Links, die als Text, als Icon oder auch in Kombination ausgegeben werden kann. Möglich ist auch die Ausgabe von versteckten Links. ## Konstruktion ### Hinweis zur Version 3 Die `KolLinkGroup` Komponente der Version 3 wurde als veraltet markiert (`deprecated`), da sie keinen wesentlichen Beitrag zur Verbesserung der Barrierefreiheit bietet. ### Hinweis zum `nav` Tag Die Verwendung des `nav` Tags wurde aus der `KolLinkGroup` Komponente entfernt, da er keinen Beitrag für die Barrierefreiheit leistet. ### Code ```html <kol-link-group _label="Einfache LinkGroup" _links="[{'_label':'Link 1','_href':'https://www.w3.org'},{'_label':'Link 2','_href':'https://www.w3.org'},{'_label':'Link 3','_href':'https://www.w3.org'}]" _list-style-type="disc" _orientation="'vertical" ></kol-link-group> ``` ### Beispiel <kol-link-group _label="Einfache LinkGroup" _links="[{'_label':'Link 1','_href':'https://www.w3.org'},{'_label':'Link 2','_href':'https://www.w3.org'},{'_label':'Link 3','_href':'https://www.w3.org'}]" _list-style-type="disc" _orientation="'vertical"></kol-link-group> ## Verwendung ### Links Die auszugebenden Links werden als JSON-Objekt an das Attribut **`_links`** übergeben. Dort können die Attribute des <kol-link _href="" _label="Links"></kol-link> übergeben werden, **`_href`** und **`_label`** sind jedoch Pflicht. ```js [ { _label: 'Link 1', _href: 'https://www.w3.org' }, { _label: 'Link 2', _href: 'https://www.w3.org' }, { _label: 'Link 3', _href: 'https://www.w3.org' }, ]; ``` ### Ausrichtung Über das Attribut **`_orientation`** kann die Ausrichtung der LinkGroup bestimmt werden. Mögliche Werte sind `horizontal` und `vertical` (Standard). ### List-Style-Type Über das Attribut **`_list-style-type`** kann bestimmt werden, mit welchem Symbol die einzelnen Zeilen der Group dargestellt werden sollen. Es stehen diese vier Möglichkeiten zur Auswahl: - `disc` - `circle` - `square` - `none` <!--### Best practices--> ### Anwendungsfälle #### LinkGroup innerhalb eines Fließtextes <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea optio deleniti fuga quos molestias, voluptate nobis nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum distinctio. Fugit, repellendus. <kol-link-group _label="LinkGroup innerhalb eines Fließtextes" _links="[{'_label':'Link 1'},{'_label':'Link 2'},{'_label':'Link 3'}]"></kol-link-group> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea optio deleniti fuga quos molestias, voluptate nobis nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum distinctio. Fugit, repellendus. </p> ## Barrierefreiheit ### Tastatursteuerung | Taste | Funktion | | ------- | ------------------------------------------- | | `Tab` | Fokussiert das erste Element der LinkGroup. | | `Enter` | Ruft den hinterlegten Link auf. | <!-- Auto Generated Below --> ## Properties | Property | Attribute | Description | Type | Default | | --------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` \| `undefined` | `undefined` | | `_links` _(required)_ | `_links` | Defines the list of links to render. | `LinkProps[]` \| `string` | `undefined` | | `_listStyleType` | `_list-style-type` | Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet | `"circle"` \| `"decimal"` \| `"decimal-leading-zero"` \| `"disc"` \| `"lower-alpha"` \| `"lower-greek"` \| `"lower-latin"` \| `"lower-roman"` \| `"none"` \| `"square"` \| `"upper-alpha"` \| `"upper-latin"` \| `"upper-roman"` \| `undefined` | `undefined` | | `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `"horizontal"` \| `"vertical"` \| `undefined` | `'vertical'` | ----------------------------------------------