Notice
Eine Benachrichtigung innerhalb der Seite: was die Person jetzt wissen muss, mit dem Status, der durch Farbe, Icon und Wort angegeben wird.
Auf dieser Seite
Playground
Die erste Erinnerung geht morgen um 9 Uhr raus.
<div class="feitio-notice"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg><strong>Erinnerung gespeichert</strong><p>Die erste Erinnerung geht morgen um 9 Uhr raus.</p></div>Wann verwenden
- Nach einer Aktion, direkt über ihrem Container, um das Ergebnis anzugeben: "Termin erstellt".
- Für etwas, das die gesamte Seite betrifft: ein ausgefallener Dienst, ein anrückender Termin.
Wann nicht verwenden
- Feldfehler: ErrorMessage und ErrorSummary.
- Status eines Elements: Tag.
- In einer Ecke des Bildschirms als Toast: nie.
Beispiele
Die Dokumente haben die Formführer gewonnen.
Die erste Benachrichtigung geht morgen um 9 raus.
Es läuft heute wieder um 3.
Die Verbindung ist abgebrochen. Was Sie geschrieben haben, bleibt noch hier; versuchen Sie es erneut.
Vier
Alle mit der Linie um sie herum in der Statusfarbe; Informationen nutzen die weiche Linie ohne Statusfarbe. Keine ist orange.
Code anzeigen
<div class="feitio-notice" data-status="ok" role="status">
<svg class="feitio-icon" aria-hidden="true">…</svg>
<strong>Agendamento criado</strong>
<p>O primeiro aviso sai amanhã às 9h.</p>
</div>Schließen und Zeit
Die Dokumente haben die Formführer gewonnen.
Mit Schließen
Das X in der Ecke: das Benachrichtigungsfenster bleibt, bis die Person es schließt. Ohne X bleibt es, bis sich der Bildschirm ändert.
Code anzeigen
<div class="feitio-notice">
…
<span class="tools">
<button type="button" class="close" aria-label="Fechar o aviso">…</button>
</span>
</div>Der erste geht morgen um 9 raus.
Mit Zeit
Mit data-timeout geht das Benachrichtigungsfenster von selbst weg, und die Fäden um das X lösen sich mit der Zeit. Darüber mit der Maus fahren: die Zeit stoppt.
Code anzeigen
<div class="feitio-notice" data-status="ok" role="status" data-timeout="8000">
…
<span class="tools">
<button type="button" class="close" aria-label="Fechar o aviso">
<svg class="ring" viewBox="0 0 24 24" aria-hidden="true"><path pathLength="100" d="…"/></svg>…
</button>
</span>
</div>
<script>feitioNotice.show(aviso) // depois da ação</script>- Zeit ist standardmäßig aus. Wenn an, kommt der Schließen-Button mit, damit die Person es früher schließen kann.
- Nur für Erfolg und Information. Warnungen und Fehler gehen nie von selbst weg: die Person muss sie sehen.
- Die Zeit stoppt, während der Mauszeiger oder Fokus auf die Benachrichtigung liegt. Eine bereits im Page befindliche Benachrichtigung beginnt erst zu zählen, wenn sie im Fenster angezeigt wird.
- Bereits im Bildschirfbereich: kein erneutes Landen: bei wiederholter Aktion tauscht die Benachrichtigung ihren Text aus und startet die Zeit erneut, ohne Papieranimation. Beim Verlassen fadet sie aus und der Bereich schließt sich mit einer Gleitbewegung.
Anatomie
Der erste geht morgen um 9 raus.
- Status-Icon.
- Titel: was passiert ist, kurz.
- Schließen, optional. Mit der Zeit löst sich der Faden um das X auf, bis die Benachrichtigung verschwindet.
- Text, optional: was zu tun ist oder was als Nächstes kommt.
- Box: der Hintergrund und die Linie in der Statusfarbe.
Do and don't
Do
Das eigene Wort des Buttons, in zwei Wörtern.
Don’t
Ihre Anfrage wurde erfolgreich verarbeitet.
"Erfolg" sagt nicht, was funktioniert hat, und der Text wiederholt den Titel.
Schreiben
- Titel: Was ist passiert, mit dem Wort der Aktion ("Termin erstellt").
- Text: nur wenn es sagt, was zu tun ist oder was als Nächstes kommt.
Wo es hingehört
- Direkt über dem Container, an dem die Aktion stattfand, mit dem StatusOverlay.
- Oben im Inhaltbereich, wenn es sich um die gesamte Seite handelt.
- Innerhalb eines Blocks, wenn es nur darum geht.
Barrierefreiheit
- Nach einer Aktion
role="status"(oderrole="alert"für Fehler), damit Screenreader es verkünden können. - Status nie allein durch Farbe: Symbol und Wort im Titel.
Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="feitio-notice" | erforderlich | Der Warnbox. |
data-status | none, "ok", "warn", "error" | Information (keine Attribute), success, warning oder error. |
role | "status", "alert" | Wenn es nach einer Aktion erscheint. |
class="tools" + class="close" | optional | Der Schließen-Button, oben rechts. |
data-timeout | Millisekunden | Verschwindet nach dieser Zeit; nur mit success und information. Trägt den Faden um die X herum. |
feitioNotice.show(el) | JS | Zeigt die Benachrichtigung nach einer Aktion: sie erscheint wie Papier oder startet nur den Timer neu, wenn bereits im Bildschirmbereich. |