dialog

A função dialog é um encapsulamento do componente <mdui-dialog>. Usando esta função, você pode abrir um diálogo sem precisar escrever o código HTML do componente.

Como usar

Importe a função conforme necessário:

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

Exemplo de uso:

open

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

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

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

  button.addEventListener("click", () => {
    dialog({
      headline: "Dialog Title",
      description: "Dialog description",
      actions: [
        {
          text: "Cancel",
        },
        {
          text: "OK",
          onClick: () => {
            console.log("confirmed");
            return false;
          },
        }
      ]
    });
  });
</script>

API

dialog(options: Options): Dialog

A função recebe um objeto Options como parâmetro; o valor retornado é a instância do componente <mdui-dialog>.

Options

Nome do atributo	Tipo	Valor padrão
`headline`	`string`	-
Título do diálogo
`description`	`string`	-
Texto de descrição do diálogo
`body`	`string` \| `HTMLElement` \| `JQ<HTMLElement>`	-
Conteúdo do corpo do diálogo, pode ser uma string HTML, elemento DOM ou objeto JQ.
`icon`	`string`	-
Nome do ícone Material Icons no topo do diálogo
`closeOnEsc`	`boolean`	`false`
Se deve fechar o diálogo ao pressionar a tecla ESC
`closeOnOverlayClick`	`boolean`	`false`
Se deve fechar o diálogo ao clicar na camada de sobreposição
`actions`	`Action[]`	-
Array de botões de ação no rodapé
`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 diálogos serão exibidos simultaneamente. Você pode passar um nome de fila neste parâmetro. Funções dialog com o mesmo nome de fila abrirão o próximo diálogo 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.
`onOpen`	`(dialog: Dialog) => void`	-
Função de retorno chamada quando o diálogo 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 diálogo é 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 diálogo 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 diálogo é 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.

Action

Nome do atributo	Tipo	Valor padrão
`text`	`string`	-
Texto do botão
`onClick`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Função de retorno chamada ao clicar no botã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, o diálogo é fechado após clicar no botão; se o valor retornado for `false`, o diálogo não é fechado; se o valor retornado for uma promise, o diálogo será fechado após a promise ser resolvida.

Capítulo anterior

Biblioteca de utilitários jq

Próximo capítulo

alert