Version:

Install ​

shell
npm i @mate/notification-bar

Import ​

javascript
import '@mate/notification-bar';

Variants ​

Alert Info ​

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

Alert Warning ​

html
<mate-notification-bar theme="warning alert" contentText="Ihr Passwort läuft in 5 Tagen ab. Aktualisieren Sie es jetzt." close-button-visible></mate-notification-bar>

Alert Error ​

html
<mate-notification-bar theme="danger alert">
    <span>Ihr Browser wird nicht unterstützt. Die Anwendung wird nicht funktionieren. </span>
    <a href="" style="color: white">Systemvoraussetzungen anzeigen.</a>
</mate-notification-bar>

Toast Info ​

html
<vaadin-notification theme="success" position="top-center"></vaadin-notification>
javascript
document.querySelector('vaadin-notification').renderer = (root, dialog, model) => root.innerHtml = ` <mate-notification-bar close-button-visible>New user {username} has been added.</mate-notification-bar>`;
document.querySelector('vaadin-notification').duration = 0;
document.querySelector('vaadin-notification').opened = true;