We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

npm i @tryg/vue-ui-library

Usage

<anchor-link-item url="http://www.example.com/" label="Label as a slot"></anchor-link-item>

import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

<template>
  <anchor-link-item url="http://www.example.com/" label="Label as a slot"></anchor-link-item>
</template>

<script setup>
import { AnchorLinkItem } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-link-item url="http://www.example.com/" label="Label as a slot"></anchor-link-item>
</template>

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</span>
  </anchor-action-description>
</anchor-link-item>

Accessibility

• Renders as a native <a> element with configurable tabindex (via the tab-index prop, defaults to 0), making it reachable via keyboard Tab navigation.
• Keyboard support: Enter and Space activate the link item when it has focus.
• When a label is provided as text, it is announced by screen readers. When using the label slot, ensure the slotted content provides a meaningful text description.
• For icon-only link items without visible text, provide an aria-label on the element to describe the link purpose to screen reader users.

API

anchor-link-item

Properties

Events

CSS Custom Properties

Dependencies

Depends on

• anchor-icon

Graph

graph TD;
  anchor-link-item --> anchor-icon
  style anchor-link-item fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS