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

<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

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

<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

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

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