prompt

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

Uso

Importa la función cuando lo necesites:

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

Uso:

abrir

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

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

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

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

API

prompt(options: Options): Promise<string>

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

Options

Nombre del atributo	Tipo	Valor predeterminado
`headline`	`string`	-
Título del cuadro de entrada
`description`	`string`	-
Texto de descripción del cuadro de entrada
`icon`	`string`	-
Nombre del icono de Material Icons en la parte superior del cuadro de entrada
`closeOnEsc`	`boolean`	`false`
Si se debe cerrar el cuadro de entrada al presionar la tecla ESC
`closeOnOverlayClick`	`boolean`	`false`
Si se debe cerrar el cuadro de entrada 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 varios cuadros de entrada simultáneamente. Puedes pasar un nombre de cola en este parámetro. Las funciones `prompt` con el mismo nombre de cola abrirán el siguiente cuadro de entrada 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.
`onConfirm`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
Función de callback al hacer clic en el botón de confirmación. Los parámetros de la función son el valor del campo de texto y la instancia del diálogo, y `this` 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 entrada de texto; 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`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
Función de callback al hacer clic en el botón de cancelación. Los parámetros de la función son el valor del campo de texto y la instancia del diálogo, y `this` 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 entrada de texto; 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 el cuadro de entrada 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 cuadro de entrada 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 cuadro de entrada 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 cuadro de entrada 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.
`validator`	`(value: string) => boolean \| string \| Promise<void>`	-
Función de validación del campo de texto, con el valor del campo como parámetro. `this` apunta a la instancia de TextField. Se ejecutará después de que la validación nativa del navegador sea exitosa. Puede devolver un valor `boolean`. `false` indica que la validación falla; `true` indica que la validación es exitosa. También puede devolver una cadena: si la cadena no está vacía, indica que la validación falla y la cadena se usará como mensaje de error. También puede devolver una Promise: si se resuelve, la validación es exitosa; si se rechaza, la validación falla y el motivo del rechazo se usará como mensaje de error.
`textFieldOptions`	`Partial<TextField>`	-
El campo de texto interno de `prompt` es el componente `<mdui-text-field>`. Puedes establecer los parámetros del componente `<mdui-text-field>` en este parámetro.

前の章

confirm

次の章

snackbar