prompt

A função prompt é um encapsulamento do componente <mdui-dialog>. Esta função é usada para substituir a função nativa window.prompt do sistema. Usando esta função, você pode abrir um diálogo com entrada de texto sem precisar escrever o código HTML do componente.

Como usar

Importe a função conforme necessário:

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

Exemplo de 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 do Prompt",
      description: "Descrição do prompt",
      confirmText: "OK",
      cancelText: "Cancelar",
      onConfirm: (value) => console.log("confirmado: " + value),
      onCancel: () => console.log("cancelado"),
    });
  });
</script>

API

prompt(options: Options): Promise<string>

O parâmetro da função é um objeto Options; o valor retornado é uma Promise. Se o diálogo for fechado ao clicar no botão de confirmação, a Promise será resolvida, com o parâmetro resolvido sendo o valor do campo de entrada. Se o diálogo for fechado por outros meios, a Promise será rejeitada.

Options

Nome do atributo	Tipo	Valor padrão
`headline`	`string`	-
Título do prompt
`description`	`string`	-
Texto de descrição do prompt
`icon`	`string`	-
Nome do ícone Material Icons no topo do prompt
`closeOnEsc`	`boolean`	`false`
Se deve fechar o prompt ao pressionar a tecla ESC
`closeOnOverlayClick`	`boolean`	`false`
Se deve fechar o prompt ao clicar na camada de sobreposição
`confirmText`	`string`	`OK`
Texto do botão de confirmação
`cancelText`	`string`	`Cancelar`
Texto do botão de cancelamento
`stackedActions`	`boolean`	`false`
Se deve empilhar verticalmente os botões de ação do rodapé
`queue`	`string`	-
Nome da fila. Por padrão, a fila não é ativada; ao chamar esta função várias vezes, vários prompts serão exibidos simultaneamente. Você pode passar um nome de fila neste parâmetro. Funções prompt com o mesmo nome de fila abrirão o próximo prompt somente após o anterior ser fechado. Se as funções `dialog()`, `alert()`, `confirm()`, `prompt()` usarem o mesmo nome de fila, elas também compartilharão a mesma fila.
`onConfirm`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
Função de retorno chamada ao clicar no botão de confirmação. Os parâmetros da função são o valor do campo de entrada e a instância do diálogo; `this` aponta para a instância do diálogo. Por padrão, o prompt é fechado após clicar no botão de confirmação; se o valor retornado for `false`, o prompt não é fechado; se o valor retornado for uma promise, o prompt será fechado após a promise ser resolvida.
`onCancel`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
Função de retorno chamada ao clicar no botão de cancelamento. Os parâmetros da função são o valor do campo de entrada e a instância do diálogo; `this` aponta para a instância do diálogo. Por padrão, o prompt é fechado após clicar no botão de cancelamento; se o valor retornado for `false`, o prompt não é fechado; se o valor retornado for uma promise, o prompt será fechado após a promise ser resolvida.
`onOpen`	`(dialog: Dialog) => void`	-
Função de retorno chamada quando o prompt começa a abrir. O parâmetro da função é a instância do diálogo, e `this` também aponta para a instância do diálogo.
`onOpened`	`(dialog: Dialog) => void`	-
Função de retorno chamada quando a animação de abertura do prompt é concluída. O parâmetro da função é a instância do diálogo, e `this` também aponta para a instância do diálogo.
`onClose`	`(dialog: Dialog) => void`	-
Função de retorno chamada quando o prompt começa a fechar. O parâmetro da função é a instância do diálogo, e `this` também aponta para a instância do diálogo.
`onClosed`	`(dialog: Dialog) => void`	-
Função de retorno chamada quando a animação de fechamento do prompt é concluída. O parâmetro da função é a instância do diálogo, e `this` também aponta para a instância do diálogo.
`onOverlayClick`	`(dialog: Dialog) => void`	-
Função de retorno chamada ao clicar na camada de sobreposição. O parâmetro da função é a instância do diálogo, e `this` também aponta para a instância do diálogo.
`validator`	`(value: string) => boolean \| string \| Promise<void>`	-
Função de validação do campo de entrada. O parâmetro é o valor do campo de entrada. `this` aponta para a instância do TextField. A validação é realizada após a validação da API nativa do navegador. Pode retornar um valor `boolean`; `false` indica falha na validação, `true` indica sucesso. Também pode retornar uma string; se a string não estiver vazia, indica falha na validação e a string retornada será usada como mensagem de erro. Também pode retornar uma Promise; se resolvida, indica sucesso na validação; se rejeitada, indica falha na validação, e o motivo da rejeição será usado como mensagem de erro.
`textFieldOptions`	`Partial<TextField>`	-
O campo de entrada dentro do prompt é o componente `<mdui-text-field>`. Você pode definir os parâmetros do componente `<mdui-text-field>` neste parâmetro.

Capítulo anterior

confirm

Próximo capítulo

snackbar