Skip to main content

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
_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

Verwendung

Die auszugebenden Links werden als JSON-Objekt an das Attribut _links übergeben. Dort können die Attribute des übergeben werden, _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:

  • disc
  • circle
  • square
  • none

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

TasteFunktion
TabFokussiert das erste Element der LinkGroup.
EnterRuft den hinterlegten Link auf.

Properties

PropertyAttributeDescriptionTypeDefault
_ariaLabel_aria-label[DEPRECATED] use _label instead

Deprecated: Setzt die semantische Beschriftung der Komponente.
string | undefinedundefined
_heading_headingGibt die optionale Überschrift zur Link-Gruppe an.string | undefinedundefined
_label_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).string | undefinedundefined
_level_levelDefines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.0 | 1 | 2 | 3 | 4 | 5 | 6 | undefinedundefined
_links (required)_linksDefines the list of links to render.LinkProps[] | stringundefined
_listStyleType_list-style-typeGibt 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" | undefinedundefined
_ordered_ordered[DEPRECATED] Wird mittels der Property _list-style-type automatisch gesteuert.

Deprecated: Gibt an, ob eine Ordered- oder eine Unordered-List verwendet werden soll.
boolean | undefinedundefined
_orientation_orientationDefines whether the orientation of the component is horizontal or vertical."horizontal" | "vertical" | undefined'vertical'

Dependencies

Depends on

Graph


Live-Editor

Beispiele