confirm

La función confirm es un envoltorio del componente <mdui-dialog>. Sustituye la función nativa window.confirm del sistema y permite mostrar un diálogo de confirmación sin escribir el código HTML del componente.

Uso

Importa la función cuando lo necesites:

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

Uso:

abrir

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

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

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

  button.addEventListener("click", () => {
    confirm({
      headline: "Título de Confirmación",
      description: "Descripción de la confirmación",
      confirmText: "Aceptar",
      cancelText: "Cancelar",
      onConfirm: () => console.log("confirmado"),
      onCancel: () => console.log("cancelado"),
    });
  });
</script>

API

confirm(options: Options): Promise<void>

La función recibe un objeto Options como parámetro; el valor de retorno es una Promise. Si 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 confirmación
`description`	`string`	-
Texto de descripción de la confirmación
`icon`	`string`	-
Nombre del icono de Material Icons en la parte superior de la confirmación
`closeOnEsc`	`boolean`	`false`
Si se debe cerrar la confirmación al presionar la tecla ESC
`closeOnOverlayClick`	`boolean`	`false`
Si se debe cerrar la confirmación al hacer clic en la capa de superposición
`confirmText`	`string`	`OK`
Texto del botón de confirmación
`cancelText`	`string`	`Cancel`
Texto del botón de cancelación
`stackedActions`	`boolean`	`false`
Si se deben apilar verticalmente los botones de acción en la parte inferior
`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 varias confirmaciones simultáneamente. Puedes pasar un nombre de cola en este parámetro. Las funciones `confirm` con el mismo nombre de cola abrirán la siguiente confirmación 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 el diálogo de confirmación; 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.
`onCancel`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Función de callback al hacer clic en el botón de cancelació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 cancelación se cierra el diálogo de confirmación; 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 confirmación 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 confirmación 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 confirmación 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 confirmación 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

alert

Capítulo siguiente

prompt