alert

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

Como usar

Importe a função conforme necessário:

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

Exemplo de uso:

open

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

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

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

  button.addEventListener("click", () => {
    alert({
      headline: "Alert Title",
      description: "Alert description",
      confirmText: "OK",
      onConfirm: () => console.log("confirmed"),
    });
  });
</script>

API

alert(options: Options): Promise<void>

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

Options

Nome do atributo	Tipo	Valor padrão
`headline`	`string`	-
Título do alerta
`description`	`string`	-
Texto descritivo do alerta
`icon`	`string`	-
Nome do ícone do Material Icons no topo do alerta
`closeOnEsc`	`boolean`	`false`
Se deve fechar o alerta ao pressionar a tecla ESC
`closeOnOverlayClick`	`boolean`	`false`
Se deve fechar o alerta ao clicar na sobreposição
`confirmText`	`string`	`OK`
Texto do botão de confirmação
`queue`	`string`	-
Nome da fila. Por padrão, a fila não é usada; ao chamar a função várias vezes, vários alertas serão exibidos simultaneamente. Você pode passar um nome de fila neste parâmetro. Funções com o mesmo nome de fila abrirão o próximo alerta somente após o anterior ser fechado. 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 o alerta; se o valor de retorno for `false`, o alerta não é fechado; se o valor de retorno for uma promise, o alerta será fechado após a promise ser resolvida.
`onOpen`	`(dialog: Dialog) => void`	-
Função de retorno quando o alerta 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 do alerta é 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 o alerta 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 do alerta é 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

dialog

Próximo capítulo

confirm