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">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 Link Er 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-controlsGibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)string | undefinedundefined
_ariaCurrent_aria-currentGibt an, welchen aktuellen Auswahlstatus der Link hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)"date" | "location" | "page" | "step" | "time" | boolean | undefinedundefined
_ariaExpanded_aria-expandedGibt an, ob durch den Link etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)boolean | undefinedundefined
_ariaLabel_aria-labelGibt einen beschreibenden Text des Links an. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)string | undefinedundefined
_ariaSelected_aria-selectedGibt an, ob der Link gerade ausgewählt ist. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)boolean | undefinedundefined
_disabled_disabledGibt an, ob der Link deaktiviert ist.boolean | undefinedfalse
_download_downloadTeilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.boolean | string | undefinedfalse
_href (required)_hrefGibt die Ziel-Url des Links an.stringundefined
_icon_iconIconklasse (z.B.: "codicon codicon-home")KoliBriHorizontalIcon & KoliBriVerticalIcon | string | undefinedundefined
_iconAlign_icon-align[DEPRECATED] Wird durch das neue flexibleren Icon-Typ abgedeckt.

Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.
"bottom" | "left" | "right" | "top" | undefinedundefined
_iconOnly_icon-onlyGibt an, ob nur das Icon angezeigt wird.boolean | undefinedfalse
_label (required)_labelSetzt den sichtbaren Text des Elements.stringundefined
_on--[DEPRECATED]

Gibt die EventCallback-Funktionen für den Link an.
undefined | { onClick?: EventValueOrEventCallback<Event, string> | undefined; }undefined
_role_roleGibt an, welche Rolle das Element hat."button" | "link" | "tab" | undefinedundefined
_selector_selector[DEPRECATED] Das Styling sollte stets über CSS erfolgen.

Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.
string | undefinedundefined
_stealth_stealth[DEPRECATED] Das Styling sollte stets über CSS erfolgen.

Gibt an, ob der Link nur beim Fokus sichtbar ist.
boolean | undefinedfalse
_tabIndex_tab-indexGibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number | undefinedundefined
_target_targetGibt an wo der Link geöffnet werden soll.string | undefinedundefined
_targetDescription_target-descriptionGibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.string | undefined'Der Link wird in einem neuen Tab geöffnet.'
_tooltipAlign_tooltip-alignGibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll."bottom" | "left" | "right" | "top" | undefined'right'
_useCase_use-case[DEPRECATED] Das Styling sollte stets über CSS erfolgen.

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

Dependencies

Used by

Depends on

  • kol-link-wc

Graph


Live-Editor

Beispiele