Skip to main content

Link

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

Beachten Sie, dass die Komponente automatisch ein Padding links und rechts zum umgebenden Text erzeugt. Sie kann daher im Fließtext ohne Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern den Abstand zum umgebenden Text.

Konstruktion

Code

<p>
In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält.
<kol-link _href="https://www.w3.org" _label="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.

Barrierefreiheit

Tastatursteuerung

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

Properties

PropertyAttributeDescriptionTypeDefault
_ariaControls_aria-controls[DEPRECATED] will be removed in v2

Deprecated: Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)
string | undefinedundefined
_ariaCurrent_aria-current[DEPRECATED] use _listen-aria-current instead

Deprecated: Marks the element as the selected in a group of related elements. Can be one of the following: date`` | ``location`` | ``page`` | ``step`` | ``time`` | ``true. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
"date" | "location" | "page" | "step" | "time" | boolean | undefinedundefined
_ariaExpanded_aria-expanded[DEPRECATED] will be removed in v2

Deprecated: Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
boolean | undefinedundefined
_ariaLabel_aria-label[DEPRECATED] use _label instead

Deprecated: Setzt die semantische Beschriftung der Komponente.
string | undefinedundefined
_ariaSelected_aria-selected[DEPRECATED] will be removed in v2

Deprecated: Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
boolean | undefinedundefined
_disabled_disabled[DEPRECATED] Ein Link kann nicht deaktiviert werden, nutzen Sie den Button-Link stattdessen.

Deprecated: Makes the element not focusable and ignore all events.
boolean | undefinedfalse
_download_downloadTells the browser that the link contains a file. Optionally sets the filename.boolean | string | undefinedfalse
_hideLabel_hide-labelHides the label and shows the description in a Tooltip instead.boolean | undefinedfalse
_href (required)_hrefDefines the target URI of the link.stringundefined
_icon_iconDefines the icon classnames (e.g. _icon="fa-solid fa-user").KoliBriHorizontalIcon & KoliBriVerticalIcon | string | undefinedundefined
_iconAlign_icon-align[DEPRECATED] Wird durch das neue flexibleren Icon-Typ abgedeckt.

Deprecated: Defines where to show the Tooltip preferably: top, right, bottom or left.
"bottom" | "left" | "right" | "top" | undefinedundefined
_iconOnly_icon-only[DEPRECATED] use _hide-label

Deprecated: Hides the label and shows the description in a Tooltip instead.
boolean | 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.boolean | string | undefinedundefined
_listenAriaCurrent_listen-aria-currentListen on a aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value."date" | "location" | "page" | "step" | "time" | boolean | 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
_selector_selector[DEPRECATED] will be removed in v2

Deprecated: Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.
string | undefinedundefined
_stealth_stealth[DEPRECATED] will be removed in v2

Deprecated: Gibt an, ob der Link nur beim Fokus sichtbar ist.
boolean | undefinedfalse
_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
_targetDescription_target-descriptionDefines the description to use when the link is going to be opened in another application.string | undefined'Der Link wird in einem neuen Tab geöffnet.'
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'right'
_useCase_use-case[DEPRECATED] will be removed in v2

Deprecated: Gibt den Verwendungsfall des Links an.
"image" | "nav" | "text" | undefined'text'

Dependencies

Used by

Depends on

  • kol-link-wc

Graph


Live-Editor

Beispiele