Notifications
Global Alerts
Global Alerts erstrecken sich flächig über die gesamte Viewport-Breite und können Text, Icons, Bilder und interaktive Elemente wie Buttons oder System Icon Buttons enthalten. Buttons können bei Bedarf in der Höhe angepasst werden, um den Alert visuell schmal zu halten.
Global Alerts können unterschiedlich positioniert werden:
- Statisch am oberen Ende der Seite (verschwindet beim Scrollen)
- Fixiert am oberen oder unteren Viewport-Rand (bleibt beim Scrollen im Viewport)
Global Alerts sind geeignet für:
- Rückmeldungen von kurzfristig hoher Bedeutung, wie z. B. Feedback über Erfolg oder Misserfolg einer vom Nutzer ausgelösten Aktion. Der Alert kann vom Nutzer verworfen werden und/oder automatisch nach einer gewissen Zeit ausgeblendet werden.
- Warnungen und Hinweise, von denen der Nutzer unbedingt Kenntnis nehmen soll, wie z. B. Cookie-Hinweise oder die Warnung vor wichtigen Deadlines. Der Alert kann vom Nutzer verworfen werden.
- Wichtige Warnungen, die sofortiges Handeln des Nutzers erfordern. Eine solche Warnung kann nicht verworfen werden und wird erst ausgeblendet, wenn das zugrunde liegende Problem gelöst wurde.
The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions.
<div class="aui-alert aui-js-alert aui-alert--sticky is-closed aui-color-white" role="alert">
<div class="aui-alert__content">
<p>
<strong>The Death Star</strong> plans are not in the main computer. Where are those transmissions you
intercepted? What have you done with those plans? We intercepted no transmissions.
</p>
<div class="aui-button-group">
<button class="aui-js-response aui-button aui-button--primary" type="button" data-close>Confirm and
close</button>
<button class="aui-js-response aui-button aui-button--secondary" type="button">Cancel</button>
</div>
</div>
</div>
<style media="screen">
body {
background-color: #f2f2f2;
padding: 50px 30%;
}
.aui-alert {
position: absolute;
text-align: left;
}
</style>
Container Alert
Container Alerts unterscheiden sich von Global Notifications nur dadurch, dass sie sich auf einen Teilbereich einer Seite beziehen und innerhalb dieses Teilbereichs – oder Containers – positioniert werden. Bei dem Container kann es sich z. B. um eine Card oder den Abschnitt einer Seite handeln. Sie eignen sich, um Alerts von lokaler Bedeutung auf Übersichts-Ansichten wiederzugeben. Der Nutzer muss sie nicht unbedingt an Ort und Stelle verwerfen können.
<div class="abp-pattern__notification-container-alert">
<div class="aui-alert aui-js-alert aui-color-text-warning" role="alert">
<div class="aui-alert__content aui-color-black">
<strong>The Death Star</strong> plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans?
And, now Your Highness, we will discuss the location of your hidden Rebel base.
</div>
</div>
</div>Toast Notification
Toast Notifications erscheinen in der oberen oder unteren Ecke des rechten Viewport-Rands. Sie eignen sich besonders für zeitsensitive Live-Benachrichtigungen. Sie können die gleichen Elemente enthalten wie Global Alerts enthalten. Der Nutzer kann sie verwerfen oder sie werden automatisch nach einer gewissen Zeitspanne ausgeblendet.
<div class="aui-notification-container" id="notifications">
<div class="aui-notification aui-js-notification aui-color-gray20 aui-color-text-light">
<div class="aui-notification__content">
The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you
done with those plans? We intercepted no transmissions.
</div>
</div>
<div class="aui-notification aui-js-notification aui-color-white aui-color-text-dark">
<div class="aui-notification__content">
The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you
done with those plans? We intercepted no transmissions.
</div>
</div>
<div class="aui-notification aui-js-notification aui-color-gray20 aui-color-text-light">
<div class="aui-notification__content">
The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you
done with those plans? We intercepted no transmissions.
</div>
</div>
<div class="aui-notification aui-js-notification aui-color-white aui-color-text-dark">
<div class="aui-notification__content">
The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you
done with those plans? We intercepted no transmissions.
</div>
</div>
</div>
Badge
Badge Notifications erscheinen als eine farbige Kreisfläche direkt an einem einzelnen Element. Sie zeigen Veränderungen am Status des Elements oder der dahinter liegenden Inhalte. Sie können optional einen Zähler enthalten, der die Anzahl der neuen Meldungen angibt. Sie eignen sich z. B., um auf ungelesene Nachrichten in Posteingängen, unbeantwortete Kalendereinladungen oder ungesehene Inhalte in Feeds hinzuweisen.
<span class="aui-badge aui-color-black aui-color-text-light">99</span>
<span class="aui-badge aui-badge--small-text aui-color-black aui-color-text-light">99+</span>
<span class="aui-badge aui-color-success aui-color-text-light">
<svg class="audiicon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#aui-icon-select-small"></use></svg>
</span>
<span class="aui-badge aui-color-warning aui-color-text-light">!</span>
<span class="aui-badge aui-color-danger aui-color-text-light">
<svg class="audiicon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#aui-icon-cancel-small"></use></svg>
</span>
<span class="aui-badge aui-color-black aui-color-text-light is-hidden">99</span>
