dialog

La función dialog envuelve el componente <mdui-dialog> y te permite mostrar un diálogo sin tener que escribir el código HTML del componente.

Uso

Importa la función cuando lo necesites:

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

Uso:

abrir

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

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

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

  button.addEventListener("click", () => {
    dialog({
      headline: "Título del Diálogo",
      description: "Descripción del diálogo",
      actions: [
        {
          text: "Cancelar",
        },
        {
          text: "Aceptar",
          onClick: () => {
            console.log("confirmado");
            return false;
          },
        }
      ]
    });
  });
</script>

API

dialog(options: Options): Dialog

La función recibe un objeto Options como parámetro; el valor de retorno es la instancia del componente <mdui-dialog>.

Options

Nombre del atributo	Tipo	Valor predeterminado
`headline`	`string`	-
Título del diálogo
`description`	`string`	-
Texto de descripción del diálogo
`body`	`string` \| `HTMLElement` \| `JQ<HTMLElement>`	-
Contenido del cuerpo del diálogo, puede ser una cadena HTML, un elemento DOM o un objeto JQ.
`icon`	`string`	-
Nombre del icono de Material Icons en la parte superior del diálogo
`closeOnEsc`	`boolean`	`false`
Si se debe cerrar el diálogo al presionar la tecla ESC
`closeOnOverlayClick`	`boolean`	`false`
Si se debe cerrar el diálogo al hacer clic en la capa de superposición
`actions`	`Action[]`	-
Array de botones de acción en la parte inferior
`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 varios diálogos simultáneamente. Puedes pasar un nombre de cola en este parámetro. Las funciones `dialog` con el mismo nombre de cola abrirán el siguiente diálogo solo después de que se cierre el anterior. Si las funciones `dialog()`, `alert()`, `confirm()` y `prompt()` tienen el mismo nombre de cola, también compartirán la misma cola.
`onOpen`	`(dialog: Dialog) => void`	-
Función de callback cuando el diálogo 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 del diálogo 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 el diálogo 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 del diálogo 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.

Action

Nombre del atributo	Tipo	Valor predeterminado
`text`	`string`	-
Texto del botón
`onClick`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Función de callback al hacer clic en el botó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 se cierra el diálogo; 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.

Capítulo anterior

jq Library

Capítulo siguiente

alert