750 #permalink Notifications
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