Zum Hauptinhalt springen

Link

Die Link-Komponente rendert einen auf Barrierefreiheit optimierten Link, der als Text, als Icon oder auch in Kombination ausgegeben werden kann.

Konstruktion

Code

<p>
In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält.
<kol-link _href="https://www.w3.org" _target="_blank">Hier steht ein Link</kol-link>Er wird standardmäßig als
<i>
<b>inline-Element</b>
</i>
ausgegeben.
</p>

Beispiel

In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. Hier steht ein LinkEr wird standardmäßig als inline-Element ausgegeben.

Verwendung

Ich bin ein Link mit Icon links

Ich bin ein Link mit Icon rechts

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. Ich bin ein Link mit Icon links. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea optio deleniti fuga quos molestias, voluptate nobis nemo, incidunt excepturi Ich bin ein Link mit Icon rechts facilis, amet ducimus minus quae corporis eligendi cum distinctio. Fugit, repellendus.

aria-current Service

Damit die Link-Komponente automatisch ein aria-current-Tag setzen kann, muss ihr über den ariaCurrent-Service mitgeteilt werden, welche Seite gerade aktiv ist:

import { setCurrentLocation } from '@public-ui/components';

/* Bei jedem Seitenwechsel aufrufen: */
setCurrentLocation('/path/to/page');

Der übergebene Location-String muss dabei exakt dem href-Attributs des Links entsprechen.

Barrierefreiheit

Tastatursteuerung

TasteFunktion
TabFokussiert das Link-Element.
EnterRuft den hinterlegten Link auf.

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyDefines the elements access key.string | undefinedundefined
_ariaCurrentValue_aria-current-valueDefines the value for the aria-current attribute."date" | "false" | "location" | "page" | "step" | "time" | "true" | undefinedundefined
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_download_downloadTells the browser that the link contains a file. Optionally sets the filename.string | undefinedundefined
_hideLabel_hide-labelHides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.boolean | undefinedfalse
_href (required)_hrefSets the target URI of the link or citation source.stringundefined
_icons_iconsDefines the icon classnames (e.g. _icons="fa-solid fa-user").KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefinedundefined
_label_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot.string | undefinedundefined
_on--Defines the callback functions for links.undefined | { onClick?: EventValueOrEventCallback<Event, string> | undefined; }undefined
_role_roleDefines the role of the components primary element."button" | "link" | "tab" | undefinedundefined
_tabIndex_tab-indexDefines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number | undefinedundefined
_target_targetDefines where to open the link.string | undefinedundefined
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'right'

Dependencies

Used by

Depends on

  • kol-link-wc

Graph


Live-Editor

Beispiele