Version:

Install ​

shell
npm i @mate-react/notification-bar

Import ​

tsx
import { MateNotificationBar } from '@mate-react/notification-bar';
import { MateNotification } from '@mate-react/notification';

Variants ​

Info Alert Bar ​

tsx
<MateNotificationBar theme="info alert" closeButtonVisible>
  Hinweis zu bevorstehenden Wartungsarbeiten.
</MateNotificationBar>

Warning Alert Bar ​

tsx
<MateNotificationBar theme="warning alert" closeButtonVisible>
  Warnung: Bitte speichern Sie Ihre Arbeit.
</MateNotificationBar>

Error Alert Bar ​

tsx
<MateNotificationBar theme="danger alert" closeButtonVisible>
  <span>Ihr Browser wird nicht unterstützt.</span>
  <MateButton slot="action">Details anzeigen</MateButton>
</MateNotificationBar>

Toast (Default) ​

tsx
<MateNotification position="top-center" duration={0} opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
  <MateNotificationBar closeButtonVisible>
    Sie verwenden jetzt Softwareversion 2.0
  </MateNotificationBar>
</MateNotification>

Toast (Success) ​

tsx
<MateNotification position="top-center" theme="success" duration={0} opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
  <MateNotificationBar closeButtonVisible>
    Datensatz erfolgreich gespeichert.
  </MateNotificationBar>
</MateNotification>