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
Code
<kol-link-group
_aria-label="Einfache LinkGroup"
_caption="Überschrift der 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
Verwendung
Links
Die auszugebenden Links werden als JSON-Objekt an das Attribut _links übergeben. Dort können die Attribute des _href und _label sind jedoch Pflicht.
[
{ _label: 'Link 1', _href: 'https://www.w3.org' },
{ _label: 'Link 2', _href: 'https://www.w3.org' },
{ _label: 'Link 3', _href: 'https://www.w3.org' },
];
Überschrift
Die Überschrift der LinkGroup wird über das Attribut _heading übergeben.
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:
disccirclesquarenone
Anwendungsfälle
LinkGroup innerhalb eines Fließtextes
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.
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.
Barrierefreiheit
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Fokussiert das erste Element der LinkGroup. |
Enter | Ruft den hinterlegten Link auf. |
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_ariaLabel (required) | _aria-label | Gibt den Text an, der die Navigation von anderen Navigationen differenziert. | string | undefined |
_heading | _heading | Gibt die optionale Überschrift zur Link-Gruppe an. | string | undefined | undefined |
_level | _level | Setzt den H-Level, von 1 bis 6, der Überschrift. | 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined | undefined |
_links (required) | _links | Setzt die Liste der darzustellenden Links. | 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 |
_ordered | _ordered | [DEPRECATED] Wird mittels der Property _list-style-type automatisch gesteuert. Gibt an, ob eine Ordered- oder eine Unordered-List verwendet werden soll. | boolean | undefined | undefined |
_orientation | _orientation | Gibt die Ausrichtung der LinkList an. | "horizontal" | "vertical" | undefined | 'vertical' |