DialogDiálogo

El componente Diálogo se usa para mostrar avisos importantes durante las acciones del usuario.

Además de usar el componente directamente, mdui también ofrece cuatro funciones: mdui.dialog, mdui.alert, mdui.confirm, mdui.prompt. Estas funciones facilitan el uso del componente Diálogo.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/dialog.js';

Importa el tipo TypeScript cuando lo necesites:

import type { Dialog } from 'mdui/components/dialog.js';

Uso:

Diálogo Cerrar

Abrir diálogo

<mdui-dialog class="example-dialog">
  Diálogo
  <mdui-button>Cerrar</mdui-button>
</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-dialog");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

Ejemplos

Cerrar al hacer clic en la superposición

Si añades el atributo close-on-overlay-click, el diálogo se cerrará al hacer clic en la superposición.

Diálogo

Abrir diálogo

<mdui-dialog close-on-overlay-click class="example-overlay">Diálogo</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-overlay");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fuente

Cerrar al presionar la tecla ESC

Si añades el atributo close-on-esc, el diálogo se cerrará al pulsar la tecla ESC.

Diálogo

Abrir diálogo

<mdui-dialog
  close-on-esc
  close-on-overlay-click
  class="example-esc"
>Diálogo</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-esc");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fuente

Pantalla completa

El atributo fullscreen hace que el diálogo se muestre en pantalla completa.

Diálogo Cerrar

Abrir diálogo

<mdui-dialog fullscreen class="example-fullscreen">
  Diálogo
  <mdui-button>Cerrar</mdui-button>
</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-fullscreen");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

Fuente

Icono

Si usas el atributo icon, se añadirá un icono de Material Icons en la parte superior del diálogo.

Diálogo

Abrir diálogo

<mdui-dialog
  icon="restart_alt"
  close-on-overlay-click
  class="example-icon"
>Diálogo</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fuente

También puedes añadir un elemento de icono en la parte superior del diálogo mediante el slot icon.

Diálogo

Abrir diálogo

<mdui-dialog close-on-overlay-click class="example-icon-slot">
  Diálogo
  <mdui-icon slot="icon" name="restart_alt"></mdui-icon>
</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fuente

Título y descripción

Los atributos headline y description para establecer el título y la descripción del diálogo.

Abrir diálogo

<mdui-dialog
  headline="¿Eliminar las imágenes seleccionadas?"
  description="Las imágenes se eliminarán permanentemente de tu cuenta y de todos los dispositivos sincronizados."
  close-on-overlay-click
  class="example-headline"
></mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fuente

También puedes usar los slots headline y description para establecer el elemento del título y el elemento de la descripción del diálogo.

¿Eliminar las imágenes seleccionadas? Las imágenes se eliminarán permanentemente de tu cuenta y de todos los dispositivos sincronizados.

Abrir diálogo

<mdui-dialog close-on-overlay-click class="example-headline-slot">
  <span slot="headline">¿Eliminar las imágenes seleccionadas?</span>
  <span slot="description">Las imágenes se eliminarán permanentemente de tu cuenta y de todos los dispositivos sincronizados.</span>
</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fuente

Botones de acción en la parte inferior

También puedes añadir botones de acción en la parte inferior mediante el slot action.

Cancelar

Eliminar

Abrir diálogo

<mdui-dialog
  close-on-overlay-click
  headline="¿Eliminar las imágenes seleccionadas?"
  class="example-action"
>
  <mdui-button slot="action" variant="text">Cancelar</mdui-button>
  <mdui-button slot="action" variant="tonal">Eliminar</mdui-button>
</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-action");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fuente

El atributo stacked-actions hace que los botones de acción en la parte inferior se apilen verticalmente.

Activar

No, gracias

Abrir diálogo

<mdui-dialog
  stacked-actions
  close-on-overlay-click
  headline="¿Usar el servicio de ubicación?"
  class="example-stacked-actions"
>
  <mdui-button slot="action" variant="text">Activar</mdui-button>
  <mdui-button slot="action" variant="text">No, gracias</mdui-button>
</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-stacked-actions");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fuente

Contenido superior

Puedes establecer el contenido superior del diálogo mediante el slot header.

Título

Guardar

Abrir diálogo

<mdui-dialog close-on-overlay-click class="example-header">
  <mdui-top-app-bar slot="header">
    <mdui-button-icon icon="close"></mdui-button-icon>
    <mdui-top-app-bar-title>Título</mdui-top-app-bar-title>
    <mdui-button variant="text">Guardar</mdui-button>
  </mdui-top-app-bar>
  <div style="height: 100px"></div>
</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-header");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`icon`	`icon`	`string`	-
Nombre del icono de Material Icons en la parte superior. También se puede establecer mediante `slot="icon"`.
`headline`	`headline`	`string`	-
Título. También se puede establecer mediante `slot="headline"`.
`description`	`description`	`string`	-
Texto debajo del título. También se puede establecer mediante `slot="description"`.
`open`	`open`	`boolean`	`false`
Indica si el diálogo está abierto.
`fullscreen`	`fullscreen`	`boolean`	`false`
Indica si se muestra el diálogo en pantalla completa.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Indica si se puede cerrar el diálogo con la tecla ESC.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Indica si se puede cerrar el diálogo al hacer clic en la superposición.
`stacked-actions`	`stackedActions`	`boolean`	`false`
Indica si los botones de acción inferiores se apilan verticalmente.

Eventos

Nombre
`open`
Se dispara cuando el diálogo comienza a abrirse. Se puede evitar que se abra llamando a `event.preventDefault()`.
`opened`
Se dispara cuando la animación de apertura del diálogo se completa.
`close`
Se dispara cuando el diálogo comienza a cerrarse. Se puede evitar que se cierre llamando a `event.preventDefault()`.
`closed`
Se dispara cuando la animación de cierre del diálogo se completa.
`overlay-click`
Se dispara al hacer clic en la superposición.

Slots

Nombre
`header`
Elemento superior, que contiene por defecto los slots `icon` y `headline`.
`icon`
Icono superior.
`headline`
Título superior.
`description`
Texto debajo del título.
(predeterminado)
Contenido principal del diálogo.
`action`
Elementos en la barra de acciones inferior.

CSS Parts

Nombre
`overlay`
Superposición.
`panel`
Contenedor del diálogo.
`header`
Parte del encabezado del diálogo, que contiene icon y headline.
`icon`
Icono superior, ubicado en el encabezado.
`headline`
Título superior, ubicado en el encabezado.
`body`
Parte del cuerpo del diálogo.
`description`
Parte del texto secundario, ubicado en el cuerpo.
`action`
Botones de acción inferiores.

CSS Custom Properties

Nombre
`--shape-corner`
Tamaño de la esquina redondeada del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.
`--z-index`
Valor CSS `z-index` del componente.

Capítulo anterior

Collapse Collapse

Capítulo siguiente

Divider Separador