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

<template>
  <anchor-notification-banner>
    This is an error message.
  </anchor-notification-banner>
</template>

<script setup>
import { AnchorNotificationBanner } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-notification-banner>
    This is an error message.
  </anchor-notification-banner>
</template>

The notification-banner component is a simple alert component that can display a variety of different types of messages, including error, info, success, and warning messages. It also displays an icon corresponding to the type of message being displayed.

The notification-banner takes up the full width of the page and is fixed to the top of the page. It sits "on top" of the page content, and does not need to fit in the flow of the page.

Error notification banner

Use the component in your template like this:

Using the header slot

You can give the notification a bold header by using the header slot.

Example:

<template>
  <anchor-notification-banner>
    <div slot="header">Custom Header</div>
  </anchor-notification-banner>
</template>

Using the link slot

You can give the notification a link by using the link slot. Remember that you have to use an <a> tag in the slot. And you have to use the slot="link" attribute on the <a> tag.

Example:

<template>
  <anchor-notification-banner>
    <a slot="link" href="http://your-link-here">Learn more</a>
  </anchor-notification-banner>
</template>

Set the max-width of the Notification Banner

You can set the max-width of the Notification Banner content by using the --notification-banner-max-width CSS variable.

Example:

anchor-notification-banner {
  --notification-banner-max-width: [your-max-width-here];
}

CSS variables

The following CSS custom properties are exposed:

Accessibility

• The notification banner uses the role="alert" ARIA role, ensuring screen readers announce its content immediately when it appears.
• Use the type prop (error, info, success, warning) to convey the severity of the notification. The corresponding icon is decorative and should not be announced separately.
• The close button supports keyboard interaction with Tab to focus and Enter / Space to activate.
• Use the close-button-aria-label prop to provide a custom accessible label for the close button. The default label may not be sufficient in all contexts.

API

anchor-notification-banner

Properties

Events

Methods

close() => Promise<void>

Returns

Type: Promise<void>

CSS Custom Properties

Dependencies

Depends on

• anchor-icon
• anchor-icon-button

Graph

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

Built with StencilJS