DialogDiálogo

O diálogo fornece alertas importantes durante o fluxo de ações do usuário.

Além de usar o componente diretamente, mdui também fornece quatro funções: mdui.dialog, mdui.alert, mdui.confirm, mdui.prompt. Essas funções simplificam o uso do componente Dialog.

Como usar

Importe o componente quando necessário:

import 'mdui/components/dialog.js';

Importe o tipo TypeScript do componente quando necessário:

import type { Dialog } from 'mdui/components/dialog.js';

Exemplo de uso:

Dialog Fechar

Abrir diálogo

<mdui-dialog class="example-dialog">
  Dialog
  <mdui-button>Fechar</mdui-button>
</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-dialog");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

Exemplos

Fechar ao clicar na sobreposição

Use o atributo close-on-overlay-click para fechar o diálogo ao clicar na sobreposição.

Dialog

Abrir diálogo

<mdui-dialog close-on-overlay-click class="example-overlay">Dialog</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-overlay");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fonte

Fechar ao pressionar a tecla ESC

Use o atributo close-on-esc para fechar o diálogo ao pressionar a tecla ESC.

Dialog

Abrir diálogo

<mdui-dialog
  close-on-esc
  close-on-overlay-click
  class="example-esc"
>Dialog</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-esc");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fonte

Tela cheia

Use o atributo fullscreen para exibir o diálogo em tela cheia.

Dialog Fechar

Abrir diálogo

<mdui-dialog fullscreen class="example-fullscreen">
  Dialog
  <mdui-button>Fechar</mdui-button>
</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-fullscreen");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

Fonte

Ícone

Defina o atributo icon para adicionar um ícone do Material Icons na parte superior do diálogo.

Dialog

Abrir diálogo

<mdui-dialog
  icon="restart_alt"
  close-on-overlay-click
  class="example-icon"
>Dialog</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fonte

Você também pode adicionar um elemento de ícone na parte superior do diálogo pelo slot icon.

Dialog

Abrir diálogo

<mdui-dialog close-on-overlay-click class="example-icon-slot">
  Dialog
  <mdui-icon slot="icon" name="restart_alt"></mdui-icon>
</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fonte

Título e descrição

Defina o título e a descrição do diálogo pelos atributos headline e description.

Abrir diálogo

<mdui-dialog
  headline="Delete selected images?"
  description="Images will be permanently removed from your account and all synced devices."
  close-on-overlay-click
  class="example-headline"
></mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fonte

Você também pode definir o elemento do título e descrição pelos slots headline e description.

Delete selected images? Images will be permanently removed from your account and all synced devices.

Abrir diálogo

<mdui-dialog close-on-overlay-click class="example-headline-slot">
  <span slot="headline">Delete selected images?</span>
  <span slot="description">Images will be permanently removed from your account and all synced devices.</span>
</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fonte

Botões de ação inferiores

Você pode adicionar botões de ação inferiores pelo slot action.

Cancelar

Deletar

Abrir diálogo

<mdui-dialog
  close-on-overlay-click
  headline="Delete selected images?"
  class="example-action"
>
  <mdui-button slot="action" variant="text">Cancelar</mdui-button>
  <mdui-button slot="action" variant="tonal">Deletar</mdui-button>
</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-action");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fonte

Use o atributo stacked-actions para organizar os botões de ação inferiores verticalmente.

Turn on speed boost

No thanks

Abrir diálogo

<mdui-dialog
  stacked-actions
  close-on-overlay-click
  headline="Use location service?"
  class="example-stacked-actions"
>
  <mdui-button slot="action" variant="text">Turn on speed boost</mdui-button>
  <mdui-button slot="action" variant="text">No thanks</mdui-button>
</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-stacked-actions");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fonte

Conteúdo superior

Você pode definir o conteúdo superior do diálogo pelo slot header.

Title

Save

Abrir diálogo

<mdui-dialog close-on-overlay-click class="example-header">
  <mdui-top-app-bar slot="header">
    <mdui-button-icon icon="close"></mdui-button-icon>
    <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
    <mdui-button variant="text">Save</mdui-button>
  </mdui-top-app-bar>
  <div style="height: 100px"></div>
</mdui-dialog>

<mdui-button>Abrir diálogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-header");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`icon`	`icon`	`string`	-
Nome do ícone Material Icons no topo. Também pode ser definido via `slot="icon"`.
`headline`	`headline`	`string`	-
Título. Também pode ser definido via `slot="headline"`.
`description`	`description`	`string`	-
Texto abaixo do título. Também pode ser definido via `slot="description"`.
`open`	`open`	`boolean`	`false`
Define se o diálogo está aberto.
`fullscreen`	`fullscreen`	`boolean`	`false`
Define se o diálogo deve ser exibido em tela cheia.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Define se é permitido fechar o diálogo pressionando a tecla ESC.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Define se é permitido fechar o diálogo clicando na camada de sobreposição.
`stacked-actions`	`stackedActions`	`boolean`	`false`
Define se os botões de ação na parte inferior devem ser empilhados verticalmente.

Eventos

Nome
`open`
Disparado quando o diálogo começa a abrir. Pode impedir a abertura chamando `event.preventDefault()`.
`opened`
Disparado quando a animação de abertura do diálogo é concluída.
`close`
Disparado quando o diálogo começa a fechar. Pode impedir o fechamento chamando `event.preventDefault()`.
`closed`
Disparado quando a animação de fechamento do diálogo é concluída.
`overlay-click`
Disparado ao clicar na camada de sobreposição.

Slots

Nome
`header`
Elemento do topo. Contém, por padrão, o slot `icon` e o slot `headline`.
`icon`
Ícone do topo.
`headline`
Título do topo.
`description`
Texto abaixo do título.
(padrão)
Conteúdo principal do diálogo.
`action`
Elementos na barra de ação inferior.

CSS Parts

Nome
`overlay`
Camada de sobreposição.
`panel`
Contêiner do diálogo.
`header`
Parte do cabeçalho do diálogo. Contém ícone e título.
`icon`
Ícone do topo, localizado no cabeçalho.
`headline`
Título do topo, localizado no cabeçalho.
`body`
Parte do corpo do diálogo.
`description`
Parte do texto secundário, localizada no corpo.
`action`
Botões de ação na parte inferior.

Propriedades CSS personalizadas

Nome
`--shape-corner`
Tamanho da borda arredondada do componente. Pode ser um valor em pixels, mas é recomendado usar os design tokens.
`--z-index`
Valor CSS `z-index` do componente.

Capítulo anterior

Collapse Collapse

Próximo capítulo

Divider Divisor