# Notice

Eine Benachrichtigung innerhalb der Seite: was die Person jetzt wissen muss, mit dem Status, der durch Farbe, Icon und Wort angegeben wird.

## Playground

```html
<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

### Vier

Alle mit der Linie um sie herum in der Statusfarbe; Informationen nutzen die weiche Linie ohne Statusfarbe. Keine ist orange.

Code anzeigen

```html
<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

### 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

```html
<div class="feitio-notice">
  …
  <span class="tools">
    <button type="button" class="close" aria-label="Fechar o aviso">…</button>
  </span>
</div>
```

### 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

```html
<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

1.  **Status-Icon**.
2.  **Titel:** was passiert ist, kurz.
3.  **Schließen**, optional. Mit der Zeit löst sich der Faden um das X auf, bis die Benachrichtigung verschwindet.
4.  **Text**, optional: was zu tun ist oder was als Nächstes kommt.
5.  **Box:** der Hintergrund und die Linie in der Statusfarbe.

## Do and don't

Do

**Change approved**

Das eigene Wort des Buttons, in zwei Wörtern.

Don’t

**Success!**

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"` (oder `role="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.