# 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;
```