Benachrichtigungen

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:

Regular
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia. 
<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:

Positive
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.
Warning
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.
Negative
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia. 
<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:

Overlay
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia. 
<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
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.
spielende Kinder
Image
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia. 
<!-- 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>
Anmerkung: Besondere Beachtung sollte dabei den CSS-Klassen .icon-frame und .img-frame geschenkt werden in denen jeweils kein Zeilenumbruch und Leerzeichen enthalten sein sollten

Schließbare Benachrichtigungen

Die Schließen-Funktion benötigt das JavaScript notification-Plugin.

Schließen
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.

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.

Events
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.