# Dialog

Eine kurze Frage in der Mitte des Bildschirms, vor einer Aktion mit großem Effekt oder ohne Rückweg. Sie schließt sich nur mit einer Antwort.

## Playground

```html
<button class="feitio-button" type="button" data-open-dialog="pg-dialog">Erinnerungen pausieren</button><dialog class="feitio-dialog" id="pg-dialog" aria-labelledby="pg-dialog-t" aria-describedby="pg-dialog-d"><form method="dialog"><h2 id="pg-dialog-t">Die 12 Erinnerungen pausieren?</h2><div id="pg-dialog-d"><p>Du kannst sie in den Einstellungen wieder einschalten.</p></div><div class="actions"><button type="submit" class="feitio-button" data-variant="primary" value="yes">Pausieren</button><button type="submit" class="feitio-button" value="cancel" autofocus>Abbrechen</button></div></form></dialog>
```

## Wann verwenden

-   Vor dem Löschen, Widerrufen, Pausieren von allem, Verlassen ohne Speichern.
-   Von der Detailseite der Sache, wo die Handlung lebt.

## Wann nicht verwenden

-   **Kann rückgängig gemacht werden:** Mach es mit dem StatusOverlay und einer Notice.
-   **Hilfe, Neuigkeiten oder Werbung:** Niemals.
-   **Ein Formular:** Das ist eine Seite, oder ein Drawer, wenn es kurz ist.
-   **Ein Dialog, der einen anderen öffnet:** Niemals.

## Beispiele

### Action ohne Rückweg

Die Handlung ist in Wein, und die letzte Zeile sagt, dass sie nicht rückgängig gemacht werden kann. Der Fokus beginnt auf Absagen.

Code anzeigen

```html
<button type="button" class="feitio-button" data-variant="danger" data-open-dialog="apagar">Apagar</button>
<dialog class="feitio-dialog" id="apagar" aria-labelledby="apagar-t" aria-describedby="apagar-d">
  <form method="dialog">
    <h2 id="apagar-t">Apagar o agendamento "Backup semanal"?</h2>
    <ul id="apagar-d"><li>…</li><li>Não dá para desfazer.</li></ul>
    <div class="actions">
      <button type="submit" class="feitio-button" data-variant="danger" value="apagar">Apagar agendamento</button>
      <button type="submit" class="feitio-button" value="cancelar" autofocus>Cancelar</button>
    </div>
  </form>
</dialog>
```

### Eingeben, um zu bestätigen

Nur für das, was auf einmal viel löscht: die Gefahren-Taste leuchtet nur mit dem richtigen Wort auf, und der Fokus startet im Feld.

Code anzeigen

```html
<form method="dialog" data-type-to-confirm="APAGAR">
  …
  <input class="feitio-input" id="confirmar" autocomplete="off">
  <button type="submit" class="feitio-button" data-variant="danger" disabled>Apagar 12 agendamentos</button>
</form>
```

## Anatomie

1.  **Die Frage:** die Handlung, der Name des Gegenstands und dessen Größe.
2.  **Was passiert**, und ob ein Rückweg besteht.
3.  **The action:** Verb und Objekt; Wein, wenn es zerstört.
4.  **Cancel:** nimmt Fokus auf offen.

## States

-   **Opening:** kommt als platziertes Papier in der Mitte des Bildschirms an, und der Hintergrund wird gedimmt.
-   **Open:** Der Rest des Bildschirms nimmt keine Berührungen oder Fokus; ein Berührung außerhalb schließt es nicht.
-   **Answered:** Es schließt sich, der Fokus kehrt zum Öffner zurück, und Feedback zeigt auf dem Container an.

## Do and don't

Do

## Löschen „Backup"?

Schaltplan löschenAbbrechen

Die Frage und der Button sagen dasselbe.

Don’t

## Bist du sicher?

JawohlNicht

„Bist du sicher?" mit Jawohl und Nicht: Es sagt nicht, was.

## Barrierefreiheit

-   Der Browsers `<dialog>` mit `showModal()`: Fängt Fokus ein, schließt mit Esc und gibt den Fokus zurück.
-   Name and description: `aria-labelledby` und `aria-describedby`.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-dialog"`

im `<dialog>`

Hobbeltes Papier, in der Mitte des Bildschirms.

`data-open-dialog`

die ID

Auf dem Öffnungsbutton.

`method="dialog"`

im inneren Formular

Die Antworten schließen das Dialogfenster.

`data-type-to-confirm`

das Wort

Nur der Gefahrenbutton leuchtet damit auf.

`autofocus`

auf Abbrechen

Der Fokus beginnt bei der Antwort, die nichts tut.