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