alert

La función alert es un envoltorio del componente <mdui-dialog>. Sustituye la función nativa window.alert del sistema y permite mostrar una alerta sin escribir el código HTML del componente.

Uso

Importa la función cuando lo necesites:

import { alert } from 'mdui/functions/alert.js';

Uso:

abrir

<mdui-button class="example-button">abrir</mdui-button>

<script type="module">
  import { alert } from "mdui/functions/alert.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    alert({
      headline: "Título de Alerta",
      description: "Descripción de la alerta",
      confirmText: "Aceptar",
      onConfirm: () => console.log("confirmado"),
    });
  });
</script>

API

alert(options: Options): Promise<void>

La función alert recibe un objeto Options como parámetro; el valor de retorno es una Promise. Si la alerta se cierra al hacer clic en el botón de confirmación, la Promise se resuelve; si se cierra por otros medios, la Promise se rechaza.

Options

Nombre del atributo	Tipo	Valor predeterminado
`headline`	`string`	-
Título de la alerta
`description`	`string`	-
Texto de descripción de la alerta
`icon`	`string`	-
Nombre del icono de Material Icons en la parte superior de la alerta
`closeOnEsc`	`boolean`	`false`
Si se debe cerrar la alerta al presionar la tecla ESC
`closeOnOverlayClick`	`boolean`	`false`
Si se debe cerrar la alerta al hacer clic en la capa de superposición
`confirmText`	`string`	`OK`
Texto del botón de confirmación
`queue`	`string`	-
Nombre de la cola. Por defecto, la cola no está habilitada. Si se llama a la función varias veces, se mostrarán varios alertas simultáneamente. Puedes pasar un nombre de cola en este parámetro. Las funciones `alert` con el mismo nombre de cola abrirán la siguiente alerta solo después de que se cierre la anterior. Si las funciones `dialog()`, `alert()`, `confirm()` y `prompt()` tienen el mismo nombre de cola, también compartirán la misma cola.
`onConfirm`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Función de callback al hacer clic en el botón de confirmación. El parámetro de la función es la instancia del diálogo, y `this` también apunta a la instancia del diálogo. Por defecto, al hacer clic en el botón de confirmación se cierra la alerta; si el valor de retorno es `false`, no se cierra; si el valor de retorno es una promesa, se cerrará después de que la promesa se resuelva.
`onOpen`	`(dialog: Dialog) => void`	-
Función de callback cuando la alerta comienza a abrirse. El parámetro de la función es la instancia del diálogo, y `this` también apunta a la instancia del diálogo.
`onOpened`	`(dialog: Dialog) => void`	-
Función de callback cuando la animación de apertura de la alerta se completa. El parámetro de la función es la instancia del diálogo, y `this` también apunta a la instancia del diálogo.
`onClose`	`(dialog: Dialog) => void`	-
Función de callback cuando la alerta comienza a cerrarse. El parámetro de la función es la instancia del diálogo, y `this` también apunta a la instancia del diálogo.
`onClosed`	`(dialog: Dialog) => void`	-
Función de callback cuando la animación de cierre de la alerta se completa. El parámetro de la función es la instancia del diálogo, y `this` también apunta a la instancia del diálogo.
`onOverlayClick`	`(dialog: Dialog) => void`	-
Función de callback al hacer clic en la capa de superposición. El parámetro de la función es la instancia del diálogo, y `this` también apunta a la instancia del diálogo.

Capítulo anterior

dialog

Capítulo siguiente

confirm