Phoenix Reisen Styleguide

750 #permalink Notifications

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Module: Mithril | React

Notifications werden typischerweise als Egebnisanzeige von Benutzerinteraktionen angezeigt. Wenn ein Benutzer beispielsweise Daten speichert oder löscht, wird ihm die Tatsache, dass dies erfolgreich oder fehlerhaft verlaufen ist, mittels einer solchen Box mitgeteilt.

Die Notification ist hier zum Zweck der beispielhaften Veranschaulichung static positioniert und ohne Animation dargestellt. Normalerweise würde sie fixed unten links im Browserfenster einfaden und nach 5 Sekunden automatisch wieder ausfaden (siehe Demo).

Examples
Default styling
.notification--info
Infomeldung
.notification--error
Fehlermeldung
.notification--success
Erfolgsmeldung
Markup
<article class="notification [modifier class]">
    <i class="fas fa-info-circle"></i>
    <span>Ich bin ein Ergebnis-Hinweis. <a href="javascript:">Mit einem Link</a>.</span>
    <a class="fas fa-times"></a>
</article>
Source: src/components/_notification.scss, line 1