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

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

<script setup>
import { ref } from 'vue';
const isOpen = ref(false);
</script>
<template>
  <anchor-modal :is-visible="isOpen">ANYTHING HERE IS SHOWN WHEN THE MODAL OPENS</anchor-modal>
  <anchor-button text="OPEN MODAL" variant="primary" @click="isOpen = true"></anchor-button>
</template>

<script setup>
import { ref } from 'vue';
import { AnchorModal, AnchorButton } from '@tryg/vue-ui-library';
const isOpen = ref(false);
</script>
<template>
  <anchor-modal :is-visible="isOpen">ANYTHING HERE IS SHOWN WHEN THE MODAL OPENS</anchor-modal>
  <anchor-button text="OPEN MODAL" variant="primary" @click="isOpen = true"></anchor-button>
</template>

Modal button slots

You have to specify the text you want shown next to the Close icon. You add the text as a slot and use the slot name to control if the text is shown before or after the Close icon.

Like this:

<template>
  <anchor-modal>
    <span slot="close-button-before-icon">Close</span>
  </anchor-modal>
</template>

or

<template>
  <anchor-modal>
    <span slot="close-button-after-icon">Close</span>
  </anchor-modal>
</template>

CSS variables

The modal is by default set to be 600px wide and 100% minus a padding for the height. Both of these values are exposed as CSS variables and can be changed in your stylesheet.

Set a custom width and height for the Modal by setting your own values for these CSS variables:

anchor-modal {
  --modal-width: 400px;
  --modal-height: 400px;
}

Modal without close button

<script setup>
import { ref } from 'vue';
const isOpen = ref(false);
</script>
<template>
  <anchor-modal :is-visible="isOpen" close-btn="false">CONTENT</anchor-modal>
  <anchor-button text="OPEN MODAL" variant="primary" @click="isOpen = true"></anchor-button>
</template>

Modal is open from the beginning

<template>
  <anchor-modal is-visible="true">CONTENT</anchor-modal>
</template>

Accessibility

• The modal uses role="dialog" and aria-modal="true" to clearly communicate its purpose to assistive technologies.
• Focus is trapped within the modal while it is open using the focusTrap prop (enabled by default), preventing users from tabbing into background content.
• Pressing Escape closes the modal, providing a standard keyboard escape mechanism.
• The close button receives an aria-label from the required closeBtnTitle prop, ensuring screen readers announce a meaningful action.
• Background scrolling is locked when the modal is open via the scrollLock prop (enabled by default). The overlay behind the modal has aria-hidden="true" to avoid announcing decorative content.

API

anchor-modal

Properties

Events

Methods

close() => Promise<void>

Closes the modal. It removes the scroll lock, hides the modal, and emits the closed event with a value of true.

Returns

Type: Promise<void>

open() => Promise<void>

Opens the modal. It shows the modal, emits the opened event with a value of true, and sets the scroll lock if enabled.

Returns

Type: Promise<void>

CSS Custom Properties

Dependencies

Depends on

• anchor-icon

Graph

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

Built with StencilJS