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

Install the component library as a Vue plugin. This globally registers all Anchor components.

main.js

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');

YourComponent.vue

<template>
  <anchor-read-more>
    <span slot="show-more">Read More</span>
    <div slot="long-text">This text will be hidden until the link is clicked.</div>
  </anchor-read-more>
</template>

Import only the components you need for optimal bundle size.

YourComponent.vue

<script setup>
import { AnchorReadMore } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-read-more>
    <span slot="show-more">Read More</span>
    <div slot="long-text">This text will be hidden until the link is clicked.</div>
  </anchor-read-more>
</template>

Show less slot

<template>
  <anchor-read-more>
    <span slot="show-more">Read More</span>
    <span slot="show-less">Show less</span>
    <div slot="long-text">This text will be hidden until the link is clicked.</div>
  </anchor-read-more>
</template>

Expanded

You can customize the default behavior of the anchor-read-more component by setting the expanded prop to true, which will cause the component to be expanded by default.

<template>
  <anchor-read-more :expanded="true">
    <span slot="show-more">Read More</span>
    <div slot="long-text">This text will be hidden until the link is clicked.</div>
  </anchor-read-more>
</template>

Emphasized

You can customize the appearance of the anchor-read-more component by setting the emphasized prop.

<template>
  <anchor-read-more :emphasized="true">
    <span slot="show-more">Read More</span>
    <div slot="long-text">This text will be hidden until the link is clicked.</div>
  </anchor-read-more>
</template>

Accessibility

Uses a native <button> element, providing built-in keyboard support for Enter and Space keys.
The button manages focus naturally, with standard browser focus management for keyboard users.
The expanded prop controls the visibility of the long-text content, allowing developers to pair it with aria-expanded for screen reader announcements.
The chevron icon rotates to visually indicate the expanded or collapsed state.
The toggled event can be used to update aria-expanded attributes on the containing element for complete screen reader support.

API

anchor-read-more

Properties

Property	Attribute	Description	Type	Default
`emphasized`	`emphasized`	Set a visually emphasized state	`boolean`	`false`
`expanded`	`expanded`	Whether the read-more starts expanded	`boolean`	`false`
`uuid`	`uuid`	Give this instance of read-more a custom ID, or keep the default.	`string`	`uuidv4()`

Events

Event	Description	Type
`toggled`	Event dispatched when read-more expands or contracts	`CustomEvent<{ value: boolean; }>`

Methods

`toggleExpand() => Promise<void>`

Returns

Type: Promise<void>

CSS Custom Properties

Name	Description
`--read-more-border-width`	Set the width of the bottom border
`--read-more-font-family`	Set the font family of the read more text.
`--read-more-font-size`	Set the font size of the read more text.
`--read-more-font-weight`	Set the font weight of the read more text.
`--read-more-icon-color`	Set the color of the read more icon.
`--read-more-line-height`	Set the line height of the read more text.
`--read-more-link-text-color`	Set the text color of the read more link.
`--read-more-link-text-color-hover`	Set the text color of the read more link on hover.
`--read-more-text-color`	Set the text color of the read more content.

Dependencies

Depends on

anchor-icon

Graph

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

Built with StencilJS

Read more3.0