Contenedores
Una ventana centrada sobre un fondo oscurecido que bloquea el resto de la interfaz. Se emplea para confirmaciones y acciones que requieren la atención completa de quien la usa.
<vadavo-modal> se declara una vez en la página y se abre y se cierra con el atributo open, o con la propiedad open desde JavaScript. La ventana es una tarjeta: el encabezado va en heading, el cuerpo en el hueco por defecto y las acciones en el hueco footer.
Mientras está abierta, el foco no sale de la ventana y el resto de la página queda inerte. La tecla Escape no la cierra: la aplicación puede necesitar una respuesta de dentro para poder continuar, y una ventana que el navegador descartara por su cuenta la dejaría sin ella. La cierran las acciones que la aplicación pone en el pie.
<button class="button secondary" onclick="document.getElementById('demo-modal').open = true">Eliminar dominio</button>
<vadavo-modal id="demo-modal" heading="Eliminar dominio">
Vas a eliminar el dominio midominio.com. Esta acción no puede deshacerse.
<div slot="footer" class="button-group">
<button class="button primary danger compact" onclick="document.getElementById('demo-modal').open = false">Eliminar</button>
<button class="button secondary compact" onclick="document.getElementById('demo-modal').open = false">Cancelar</button>
</div>
</vadavo-modal>Las acciones van en un button-group, con la que ejecuta a la izquierda y la de cancelar a la derecha. La destructiva lleva la clase danger, y la combinación primary danger queda reservada a esta confirmación: fuera de un modal, una acción destructiva llega como mucho al nivel secundario.
| Token | Qué es |
|---|---|
--modal--background--scrim | El color de la capa que cubre la página detrás del modal. |