Dialog
Una pregunta corta en medio de la pantalla, antes de una acción con gran efecto o sin vuelta atrás. Solo se cierra con una respuesta.
En esta página
Playground
Tipo
Fondo
<button class="feitio-button" type="button" data-open-dialog="pg-dialog">Pausar recordatorios</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">¿Pausar los 12 recordatorios?</h2><div id="pg-dialog-d"><p>Puedes reactivarlos en Ajustes.</p></div><div class="actions"><button type="submit" class="feitio-button" data-variant="primary" value="yes">Pausar</button><button type="submit" class="feitio-button" value="cancel" autofocus>Cancelar</button></div></form></dialog>Cuándo usarlo
- Antes de borrar, revocar, pausar todo, salir sin guardar.
- Desde la página de detalles del elemento, donde reside la acción.
Cuándo no usarlo
- ¿Qué se puede deshacer: hágalo, con el StatusOverlay y un Notice.
- Ayuda, noticias o promoción: nunca.
- Un formulario: que es una página, o un Drawer si es corto.
- Un Dialog que abre otro: nunca.
Ejemplos
Acción sin vuelta atrás
La acción en vino, y la última línea dice que no se puede deshacer. El foco comienza en Cancel.
Mostrar código
<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>Escriba para confirmar
Solo para lo que borra mucho a la vez: el botón de peligro solo se ilumina con la palabra correcta, y el foco empieza en el campo.
Mostrar código
<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>Anatomía
Pausar los 12 recordatorios?
Puedes volver a activarlos en Configuración.
- La pregunta: la acción, el nombre de la cosa y su tamaño.
- Qué pasa, y si hay forma de volver atrás.
- La acción: verbo y objeto; vino cuando destruye.
- Cancelar: toma el foco en abierto.
Estados
- Abriendo: llega como papel colocado, en el centro de la pantalla, y el fondo se oscurece.
- Abierto: el resto de la pantalla no recibe toques ni foco; un toque fuera no lo cierra.
- Respondido: se cierra, el foco vuelve al iniciador y la retroalimentación muestra en el contenedor.
Hacer y no hacer
Do
¿Eliminar "Respaldo"?
La pregunta y el botón dicen lo mismo.
Don’t
¿Está seguro?
"¿Está seguro?" con Sí y No: no dice qué.
Accesibilidad
- El navegador
<dialog>conshowModal(): atrapa el foco, cierra con Esc y devuelve el foco. - Nombre y descripción:
aria-labelledbyyaria-describedby.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-dialog" | en el <dialog> | Papel levantado, en el centro de la pantalla. |
data-open-dialog | el id | En el botón de apertura. |
method="dialog" | en el formulario interno | Las respuestas cierran el Dialog. |
data-type-to-confirm | la palabra | El botón de peligro solo se ilumina con él. |
autofocus | en Cancel | El foco comienza en la respuesta que no hace nada. |