In Anwenungen sind Rückmeldungen an einen Benutzer unerlässlich. Zur Erstellung solcher Benachrichtigungen steht die CSS-Klasse .notification
zur Verfügung. Die Nachricht sollte dabei in den Container .notification-content
geschrieben werden. Überschriften haben die CSS-Klasse .notification-heading
:
<div class="notification"> <div class="notification-content"> <div class="notification-heading">Regular</div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia. </div> </div>
Funktionale Dekorationen¶ ↑
Um die Bedeutungen von Benachrichtigungen zu unterstützen stehen verschiedene Farb-Varianten zur Verfügung:
<div class="notification notification-positive">...</div> <div class="notification notification-warning">...</div> <div class="notification notification-negative">...</div>
Overlay Dekoration¶ ↑
Werden Benachrichtigungen über anderem Inhalt angezeigt sollte dies auch visuell vermittelt werden. Hierfür ist die CSS-Klasse .notification-overlay
zuständig:
<div class="notification"> <div class="notification-content notification-overlay"> <div class="notification-heading">Overlay</div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia. </div> </div>
Zusätzlicher Inhalt¶ ↑
Um den Inhalt einer Benachrichtigungen nochmals zu verdeutlichen kann zusätzlicher Inhalt in Form eines Icons oder eines Bildes in die Benachrichtigung integriert werden. Der zusätzliche Inhalt kann mit der CSS-Klasse .notification-left
vor und mit der CSS-Klasse .notification-right
hinter dem Inhalt platziert werden:

<!-- Icon --> <div class="notification"> <div class="notification-left"> <div class="icon-frame"><i class="icon icon-comment icon-large"></i></div> </div> <div class="notification-content"> ... </div> </div> <!-- Bild --> <div class="notification"> <div class="notification-left"> <div class="img-frame"><img class="img-thumbnail" src="assets/play.jpg" alt="spielende Kinder"/></div> </div> <div class="notification-content"> ... </div> </div>
Schließbare Benachrichtigungen¶ ↑
Die Schließen-Funktion benötigt das JavaScript notification
-Plugin.
Verwendung¶ ↑
Zunächst wird natürlich ein Schließen-Button benötigt. Hierfür sollte das Mikro-Modul .close
verwendet werden. Über das Attribut data-dismiss="notification"
wird die Schließen-Funktionalität aktiviert:
<div class="notification notification-dismissible"> <button type="button" class="close" data-dismiss="notification"> <span aria-hidden="true">x</span> <span class="sr-only">Schließen</span> </button> <div class="notification-content"> <div class="notification-heading">Schließen</div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia. </div> </div>
Um das Schließen zu Animieren müssen die CSS-Klassen .fade
und .in
bereits auf die Benachrichtigung angewendet sein.
Methoden
Schließen einer Benachrichtigung
$().notification('close')
Die Benachrichtigung wird komplett aus dem DOM entfernt.
Typ | Beschreibung |
---|---|
close.tc.modal | Dieses Event tritt noch vor dem eigentlichen Schließen des Modal-Dialogs auf. |
closed.tc.modal | Dieses Event tritt auf, wenn der Modal-Dialog fertig geschlossen wurde. |