Dialog

Une courte question au milieu de l'écran, avant une action à fort effet ou sans possibilité de retour. Elle se ferme uniquement avec une réponse.

Playground

<button class="feitio-button" type="button" data-open-dialog="pg-dialog">Mettre en pause</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">Mettre en pause les 12 rappels ?</h2><div id="pg-dialog-d"><p>Vous pouvez les réactiver dans Réglages.</p></div><div class="actions"><button type="submit" class="feitio-button" data-variant="primary" value="yes">Mettre en pause</button><button type="submit" class="feitio-button" value="cancel" autofocus>Annuler</button></div></form></dialog>

Quand l'utiliser

• Avant de supprimer, d'annuler, de mettre en pause tout, de partir sans sauvegarder.
• À partir de la page de détails de l'élément, là où réside l'action.

Quand ne pas l'utiliser

• Qu'est-ce qui peut être annulé : faites-le avec le StatusOverlay et un Notice.
• Aide, actualité ou promotion : jamais.
• Un formulaire : c'est une page, ou un Drawer s'il est court.
• Un Dialog ouvrant un autre : jamais.

Exemples

<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

États

• Ouverture : arrive comme un papier posé, au milieu de l'écran, et l'arrière-plan s'assombre.
• Ouvert : le reste de l'écran ne prend ni touches ni focus ; une touche en dehors ne le ferme pas.
• Répondu : il se ferme, le focus retourne à l'opener, et la rétroaction montre sur le conteneur.

Faire et ne pas faire

Accessibilité

• Le navigateur <dialog> avec showModal() : piège le focus, ferme avec Esc et retourne le focus.
• Nom et description : aria-labelledby et aria-describedby.

Attributs