confirm

A função confirm é um encapsulamento do componente <mdui-dialog>. Esta função substitui funcionalmente a função nativa window.confirm do sistema. Usando esta função, você não precisa escrever o código HTML do componente para abrir uma caixa de confirmação.

Como usar

Importe a função conforme necessário:

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

Exemplo de uso:

open

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

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

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

  button.addEventListener("click", () => {
    confirm({
      headline: "Confirm Title",
      description: "Confirm description",
      confirmText: "OK",
      cancelText: "Cancel",
      onConfirm: () => console.log("confirmed"),
      onCancel: () => console.log("canceled"),
    });
  });
</script>

API

confirm(options: Options): Promise<void>

A função recebe um objeto Options como parâmetro; o valor de retorno é uma Promise. Se fechada clicando no botão de confirmação, a Promise será resolvida; se fechada por outros meios, a Promise será rejeitada.

Options

Nome do atributo	Tipo	Valor padrão
`headline`	`string`	-
Título da confirmação
`description`	`string`	-
Texto descritivo da confirmação
`icon`	`string`	-
Nome do ícone do Material Icons no topo da confirmação
`closeOnEsc`	`boolean`	`false`
Se deve fechar a confirmação ao pressionar a tecla ESC
`closeOnOverlayClick`	`boolean`	`false`
Se deve fechar a confirmação ao clicar na sobreposição
`confirmText`	`string`	`OK`
Texto do botão de confirmação
`cancelText`	`string`	`Cancel`
Texto do botão de cancelamento
`stackedActions`	`boolean`	`false`
Se deve organizar os botões de ação inferiores verticalmente
`queue`	`string`	-
Nome da fila. Por padrão, a fila não é usada; ao chamar a função várias vezes, várias confirmações serão exibidas simultaneamente. Você pode passar um nome de fila neste parâmetro. Funções com o mesmo nome de fila abrirão a próxima confirmação somente após a anterior ser fechada. Se as funções `dialog()`, `alert()`, `confirm()` e `prompt()` tiverem o mesmo nome de fila, elas compartilharão a mesma fila.
`onConfirm`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Função de retorno ao clicar no botão de confirmaçã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. Por padrão, clicar no botão de confirmação fecha a confirmação; se o valor de retorno for `false`, a confirmação não é fechada; se o valor de retorno for uma promise, a confirmação será fechada após a promise ser resolvida.
`onCancel`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Função de retorno ao clicar no botão de cancelamento. O parâmetro da função é a instância do diálogo, e `this` também aponta para a instância do diálogo. Por padrão, clicar no botão de cancelamento fecha a confirmação; se o valor de retorno for `false`, a confirmação não é fechada; se o valor de retorno for uma promise, a confirmação será fechada após a promise ser resolvida.
`onOpen`	`(dialog: Dialog) => void`	-
Função de retorno quando a confirmação 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 quando a animação de abertura da confirmação é 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 quando a confirmação 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 quando a animação de fechamento da confirmação é 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 ao clicar na 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.

Capítulo anterior

alert

Próximo capítulo

prompt