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

The user is NOT able to close the modal via a close icon in the top right corner or clicking the backdrop.

Because of this, you must implement a way for the user to take action and close the modal. The suggested way to do this is by providing a secondary button for "Cancel" and a primary button for "Ok". You need to implement the logic for these buttons yourself.

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-dialog :is-visible="isOpen">ANYTHING HERE IS SHOWN WHEN THE DIALOG OPENS</anchor-dialog>
  <anchor-button text="OPEN DIALOG" variant="primary" color="brand" @click="isOpen = true"></anchor-button>
</template>

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

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

CSS variables

The dialog 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 Dialog by setting your own values for these CSS variables:

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

Dialog is open from the beginning

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

Accessibility

• The dialog uses role="dialog" and aria-modal="true" to clearly communicate its purpose to assistive technologies.
• Focus is trapped within the dialog while it is open using the focusTrap prop (enabled by default), preventing users from tabbing into background content.
• Pressing Escape closes the dialog, providing a standard keyboard escape mechanism.
• Background scrolling is locked when the dialog is open via the scrollLock prop (enabled by default), preventing accidental interaction with content behind the dialog.
• Use aria-labelledby on the dialog element referencing a heading inside the dialog content to provide a descriptive title for screen readers.

API

anchor-dialog

Properties

Events

Methods

close() => Promise<void>

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

Returns

Type: Promise<void>

open() => Promise<void>

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

Returns

Type: Promise<void>

CSS Custom Properties

Built with StencilJS