Link item2.0
The anchor-link-item component is a custom link component that provides a clickable link with an optional icon and label. It can be used in any web application and supports various props and events for customization and interaction.
Ads by Tryg Careers
Installation
npm i @tryg/ui-libraryUsage
Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.
<script type="module">
import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-link-item';
defineCustomElement();
</script>
<anchor-link-item url="http://www.example.com/" label="Label as a slot"></anchor-link-item>Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..
<script type="module">
import { defineCustomElements } from '@tryg/ui-library/dist/loader';
defineCustomElements();
</script>
<anchor-link-item url="http://www.example.com/" label="Label as a slot"></anchor-link-item>Label slot
Pass in a label as a slot.
Note that you have to wrap your content in an html element with the attribute slot="label":
<anchor-link-item url="http://www.example.com/">
<span slot="label">This is a label as a slot</span>
</anchor-link-item>Action slot
Pass in a description of what happens when the user click the link-item. You can also pass in an icon.
<anchor-link-item url="http://www.example.com/">
<anchor-action-description slot='action'>
<anchor-icon slot='icon' name='alert-circle'></anchor-icon>
<span slot='action'>Fill out the missing information here</slot>
</anchor-action-description>
</anchor-link-item>API
anchor-link-item
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
icon | icon | Icon to display in the header. Note that the icon will be rotated when link-item is expanded. | "activity" | "airplay" | "alarm" | "alert-circle" | "alert-octagon" | "alert-triangle" | "align-center" | "align-justify" | "align-left" | "align-right" | "anchor" | "aperture" | "archive" | "arrow-down" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "at-sign" | "award" | "band-aid" | "bar-chart" | "bar-chart-2" | "basket" | "battery" | "battery-charging" | "bell" | "bell-off" | "bluetooth" | "bold" | "bonus-tryghedsgruppen" | "book" | "book-open" | "bookmark" | "box" | "briefcase" | "calculator" | "calendar" | "camera" | "camera-off" | "cast" | "check" | "check-circle" | "check-square" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "chrome" | "circle" | "clipboard" | "clock" | "cloud" | "cloud-drizzle" | "cloud-lightning" | "cloud-off" | "cloud-rain" | "cloud-snow" | "code" | "codepen" | "codesandbox" | "coffee" | "columns" | "command" | "company" | "compass" | "copy" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "cpu" | "credit-card" | "crop" | "crosshair" | "database" | "delete" | "disc" | "divide" | "divide-circle" | "divide-square" | "dollar-sign" | "download" | "download-cloud" | "dribbble" | "droplet" | "edit" | "edit-2" | "edit-3" | "external-link" | "eye" | "eye-off" | "facebook" | "fast-forward" | "feather" | "figma" | "file" | "file-minus" | "file-pdf" | "file-plus" | "file-text" | "film" | "filter" | "flag" | "folder" | "folder-minus" | "folder-plus" | "framer" | "frown" | "gift" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "github" | "gitlab" | "globe" | "grid" | "hard-drive" | "hash" | "headphones" | "heart" | "help-circle" | "hexagon" | "home" | "image" | "inbox" | "info" | "instagram" | "italic" | "key" | "layers" | "layout" | "life-buoy" | "link" | "link-2" | "linkedin" | "list" | "loader" | "lock" | "log-in" | "log-out" | "mail" | "map" | "map-pin" | "maximize" | "maximize-2" | "megaphone" | "meh" | "menu" | "message-circle" | "message-square" | "mic" | "mic-off" | "minimize" | "minimize-2" | "minus" | "minus-circle" | "minus-square" | "monitor" | "moon" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "move" | "music" | "navigation" | "navigation-2" | "octagon" | "offer" | "package" | "paperclip" | "pause" | "pause-circle" | "pen-tool" | "percent" | "phone" | "phone-call" | "phone-forwarded" | "phone-incoming" | "phone-missed" | "phone-off" | "phone-outgoing" | "pie-chart" | "play" | "play-circle" | "plus" | "plus-circle" | "plus-square" | "pocket" | "power" | "printer" | "radio" | "refresh-ccw" | "refresh-cw" | "repeat" | "rewind" | "rotate-ccw" | "rotate-cw" | "rss" | "save" | "scissors" | "search" | "send" | "server" | "settings" | "share" | "share-2" | "shield" | "shield-off" | "shopping-bag" | "shopping-cart" | "shuffle" | "sidebar" | "skip-back" | "skip-forward" | "slack" | "slash" | "sliders" | "smartphone" | "smile" | "speaker" | "sprout" | "square" | "star" | "star-filled" | "stop-circle" | "storm" | "sun" | "sunrise" | "sunset" | "table" | "tablet" | "tag" | "target" | "terminal" | "thermometer" | "thumbs-down" | "thumbs-up" | "toggle-left" | "toggle-right" | "tool" | "trash" | "trash-2" | "trello" | "trending-down" | "trending-up" | "triangle" | "truck" | "trygfonden" | "tv" | "twitch" | "twitter" | "type" | "umbrella" | "underline" | "unlock" | "upload" | "upload-cloud" | "user" | "user-check" | "user-minus" | "user-plus" | "user-x" | "users" | "video" | "video-off" | "voicemail" | "volume" | "volume-1" | "volume-2" | "volume-x" | "watch" | "wifi" | "wifi-off" | "wind" | "x" | "x-circle" | "x-octagon" | "x-square" | "youtube" | "zap" | "zap-off" | "zoom-in" | "zoom-out" | 'chevron-right' |
iconSize | icon-size | Size of the chevron. | "large" | "medium" | "small" | "xlarge" | "xsmall" | 'medium' |
iconStroke | icon-stroke | Stroke size for the chevron. | number | 2 |
label | label | Text to display in the header | any | undefined |
tabi | tab-index | tabindex is a reserved name so we use tabi which will apply the tabindex attribute Default value should work fine so don't change this unless you have a really good reason to. Set to -1 to disable tabbing. | number | 0 |
url | url | Where should the user go, when clicking on the link-item. | any | undefined |
uuid | uuid | Give this instance of link-item a custom ID, or keep the default. | string | uuidv4() |
variant | variant | Style of the link-item. You should ideally not mix these if using inside an link. | "box" | "default" | 'default' |
Events
| Event | Description | Type |
|---|---|---|
clicked | Event dispatched when link-item expands or contracts {querySelecter}.addEventListener('toggled', ({detail}) => {console.log('expanded:', detail.value)}) | CustomEvent<{ value: boolean; }> |
CSS Custom Properties
| Name | Description |
|---|---|
--background-color | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--border | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--border-color | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--border-size | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--border-style | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--box-sizing | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--chevron-margin | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--gap | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--link-item-background-color | Set the background color of the link item. |
--link-item-border | Set the shorthand for the link item border. |
--link-item-border-color | Set the color of the link item border. |
--link-item-border-radius | Set the border radius. |
--link-item-border-size | Set the size of the link item border. |
--link-item-border-style | Set the border style. |
--link-item-box-sizing | Set the box sizing of the link item. |
--link-item-chevron-margin | Set the margin around the chevron icon. |
--link-item-hover-background-color | Set the hover color of the background. |
--link-item-hover-filter | Set the hover filter for the background. |
--link-item-link-gap | Set the gap between link items. |
--link-item-padding-bottom | Set the size of the bottom padding. |
--link-item-padding-horizontal | Set the size of the horizontal padding. |
--link-item-padding-left | Set the size of the left padding. |
--link-item-padding-right | Set the size of the right padding. |
--link-item-padding-shorthand | Set the shorthand for all padding values. |
--link-item-padding-size | Set the size of the padding around the link item. |
--link-item-padding-top | Set the size of the top padding. |
--link-item-padding-vertical | Set the size of the vertical padding. |
--padding-bottom | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--padding-horizontal | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--padding-left | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--padding-right | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--padding-shorthand | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--padding-size | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--padding-top | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
Dependencies
Depends on
Graph
Built with StencilJS
Icon
The Anchor Icons help maintain visual consistency across our applications and platforms by providing a unified language for conveying information.
Link
The Link component enables users to navigate between pages with a single click. Styled to mimic a traditional hyperlink, it semantically renders as an HTML `<a>` element.