Version:

Install ​

shell
npm i @mate-vue/notification-bar

Import ​

vue
<script setup>
import { MateNotificationBar } from '@mate-vue/notification-bar';
</script>

Variants ​

Alert Info ​

vue
<template>
  <MateNotificationBar theme="info alert" contentText="Hinweis zu bevorstehenden Wartungsarbeiten: Sonntag zwischen 12:00 - 16:00 Uhr." close-button-visible></MateNotificationBar>
</template>

Alert Warning ​

vue
<template>
  <MateNotificationBar theme="warning alert" contentText="Ihr Passwort läuft in 5 Tagen ab. Aktualisieren Sie es jetzt." close-button-visible></MateNotificationBar>
</template>

Alert Error ​

vue
<template>
  <MateNotificationBar theme="danger alert">
    <span>Ihr Browser wird nicht unterstützt. Die Anwendung wird nicht funktionieren. </span>
    <a href="" style="color: white">Systemvoraussetzungen anzeigen.</a>
  </MateNotificationBar>
</template>

Toast Info ​

vue
<template>
    <MateNotification position="top-center" theme="success" header-title="Medium" duration="0" v-model:opened="opened">
      <template #default>
        <MateNotificationBar close-button-visible>New user {username} has been added.</MateNotificationBar>
      </template>
    </MateNotification>
</template>