Link
#Link
The Link component renders a link optimized for accessibility, which can be output as text, as an icon or in combination.
Construction
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>
Events
For the handling of events or callbacks, see
| Event | trigger | Value |
|---|---|---|
click | Element is clicked | _href property |
Example
In this paragraph a link is set that does not contain any other attributes.
Usage
Link within a continuous text with icon and text
I am a link with an icon on the right
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.
aria-current service
So that the link component automatically creates a aria-current tag can set, it must be informed via the ariaCurrent service which page is currently active:
import { setCurrentLocation } from '@public-ui/components';
/* Bei jedem Seitenwechsel aufrufen: */
setCurrentLocation('/path/to/page');
The location string passed must correspond exactly to the href attribute of the link.
Accessibility
Keyboard controls
| button | Function |
|---|---|
Tab | Focuses the link element. |
Enter | Calls up the provided link. |
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_accessKey | _access-key | Defines the key combination that can be used to trigger or focus the component's interactive element. | string | undefined | undefined |
_ariaControls | _aria-controls | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | string | undefined | undefined |
_ariaCurrentValue | _aria-current-value | Defines the value for the aria-current attribute. | "date" | "false" | "location" | "page" | "step" | "time" | "true" | undefined | undefined |
_ariaDescription | _aria-description | Defines the value for the aria-description attribute. | string | undefined | undefined |
_ariaExpanded | _aria-expanded | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | boolean | undefined | undefined |
_disabled | _disabled | Makes the element not focusable and ignore all events. | boolean | undefined | false |
_download | _download | Tells the browser that the link contains a file. Optionally sets the filename. | string | undefined | undefined |
_hideLabel | _hide-label | Hides 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 | undefined | false |
_href (required) | _href | Sets the target URI of the link or citation source. | string | undefined |
_icons | _icons | Defines the icon classnames (e.g. _icons="fa-solid fa-user"). | KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined | undefined |
_inline | _inline | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | boolean | undefined | true |
_label | _label | Defines 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 | undefined | undefined |
_on | -- | Defines the callback functions for links. | undefined | { onClick?: EventValueOrEventCallback<Event, string> | undefined; } | undefined |
_role | _role | [DEPRECATED] We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future. Defines the role of the components primary element. | "tab" | "treeitem" | undefined | undefined |
_shortKey | _short-key | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | string | undefined | undefined |
_target | _target | Defines where to open the link. | string | undefined | undefined |
_tooltipAlign | _tooltip-align | Defines where to show the Tooltip preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" | undefined | 'right' |
Methods
kolFocus
kolFocus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>