O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Diálogo

O diálogo no mdui é um componente muito versátil, frequentemente utilizado para solicitar informações, notificar ou alertar o usuário.

Apenas um diálogo será exibido por vez. Se o próximo diálogo for aberto antes que o atual seja fechado, ele será adicionado à fila e aberto após o fechamento do diálogo atual.

Como usar

Chamar via atributos personalizados
Chamar via JavaScript

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Diálogos

Estilo

Diálogo padrão

Este é um diálogo padrão.

Exemplo

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">erase</button>
  </div>
</div>

Sem barra de título

Este diálogo não possui barra de título.

Exemplo

<div class="mdui-dialog">
  <div class="mdui-dialog-content">Discard draft?</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">discard</button>
  </div>
</div>

Botões empilhados

Os botões na parte inferior do diálogo são organizados horizontalmente por padrão. Basta adicionar a classe .mdui-dialog-actions-stacked em <div class="mdui-dialog-actions"></div> para alterná-los para uma organização vertical.

Exemplo

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Use Google's location service?</div>
  <div class="mdui-dialog-content">Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</div>
  <div class="mdui-dialog-actions mdui-dialog-actions-stacked">
    <button class="mdui-btn mdui-ripple">turn on speed boost</button>
    <button class="mdui-btn mdui-ripple">no thanks</button>
  </div>
</div>

Título e botões fixos

Quando o conteúdo exceder a altura do diálogo, o conteúdo em .mdui-dialog-content terá uma barra de rolagem.

Se .mdui-dialog-title e .mdui-dialog-actions forem colocados dentro de .mdui-dialog-content, o título e os botões inferiores rolarão com a barra de rolagem; caso contrário, o título e os botões ficarão fixos no topo e na parte inferior, respectivamente.

Exemplo

<div class="mdui-dialog">
  <div class="mdui-dialog-content">
    <div class="mdui-dialog-title">Use Google's location service?</div>
    Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
    <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test
  </div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">no thanks</button>
    <button class="mdui-btn mdui-ripple">turn on speeboost</button>
  </div>
</div>

Conteúdo personalizado

Apenas <div class="mdui-dialog"></div> é obrigatório no diálogo; o conteúdo dentro deste elemento pode ser substituído por qualquer HTML.

No exemplo abaixo, uma aba foi colocada dentro do diálogo:

Exemplo

<div class="mdui-dialog" id="example-4">
  <div class="mdui-tab mdui-tab-full-width" id="example4-tab">
    <a href="#example4-tab1" class="mdui-ripple">web</a>
    <a href="#example4-tab2" class="mdui-ripple">shopping</a>
    <a href="#example4-tab3" class="mdui-ripple">videos</a>
  </div>
  <div id="example4-tab1" class="mdui-p-a-2">
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
  </div>
  <div id="example4-tab2" class="mdui-p-a-2">
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
  </div>
  <div id="example4-tab3" class="mdui-p-a-2">
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
  </div>
</div>

<script>
  var tab = new mdui.Tab('#example4-tab');
  document.getElementById('example-4').addEventListener('open.mdui.dialog', function () {
    tab.handleUpdate();
  });
</script>

Como usar

Chamar via atributos personalizados

Com este método, não é necessário escrever código JavaScript. Basta adicionar o atributo mdui-dialog="options" a um elemento de controle (por exemplo: um botão). Ao usar atributos personalizados, um parâmetro target adicional é necessário para especificar o diálogo controlado, sendo seu valor o seletor CSS do diálogo controlado.

Exemplo

<button class="mdui-btn mdui-ripple mdui-color-theme-accent" mdui-dialog="{target: '#exampleDialog'}">open</button>

<div class="mdui-dialog" id="exampleDialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple" mdui-dialog-close>cancel</button>
    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>erase</button>
  </div>
</div>

Alguns atributos podem ser adicionados aos elementos dentro do diálogo para vincular eventos; esses atributos também podem ser usados ao chamar via JavaScript.

Atributo	Descrição
`mdui-dialog-close`	Clicar neste elemento acionará o evento `close.mdui.dialog` e fechará o diálogo.
`mdui-dialog-cancel`	Clicar neste elemento acionará o evento `cancel.mdui.dialog`.
`mdui-dialog-confirm`	Clicar neste elemento acionará o evento `confirm.mdui.dialog`.

Chamar via JavaScript

Instanciar componente:

// selector é o seletor CSS do diálogo, elemento DOM ou string HTML
// options são os parâmetros de configuração, veja a lista de parâmetros abaixo
var inst = new mdui.Dialog(selector, options);

Executar

Parâmetro

Nome do parâmetro	Tipo	Valor padrão	Descrição
`overlay`	`boolean`	`true`	Se deve exibir a sobreposição ao abrir o diálogo.
`history`	`boolean`	`true`	Se deve adicionar um hash de URL ao abrir o diálogo. Se for true, o diálogo poderá ser fechado usando o botão voltar do navegador ou a tecla voltar do Android.
`modal`	`boolean`	`false`	Se o diálogo deve ser modal. Se for false, clicar na área fora do diálogo o fechará; caso contrário, não fechará.
`closeOnEsc`	`boolean`	`true`	Se deve fechar o diálogo ao pressionar a tecla Esc.
`closeOnCancel`	`boolean`	`true`	Se deve fechar o diálogo ao pressionar o botão de cancelamento.
`closeOnConfirm`	`boolean`	`true`	Se deve fechar o diálogo ao pressionar o botão de confirmação.
`destroyOnClosed`	`boolean`	`false`	Se deve destruir automaticamente o diálogo após fechá-lo.

Método

Nome do método	Descrição
`open()`	Abrir o diálogo.
`close()`	Fechar o diálogo.
`toggle()`	Alternar o estado de abertura do diálogo.
`getState()`	Obter o estado do diálogo. Contém quatro estados (`opening`, `opened`, `closing`, `closed`).
`destroy()`	Destruir o diálogo.
`handleUpdate()`	Reajustar a posição do diálogo e a altura da barra de rolagem. Se o conteúdo do diálogo for modificado após abri-lo, este método deve ser chamado.

Evento

Nome do evento	Descrição	Alvo	Parâmetros
`open.mdui.dialog`	O evento será acionado quando o diálogo iniciar a animação de abertura.	`<div class="mdui-dialog"></div>`	`event._detail.inst`: Instância
`opened.mdui.dialog`	O evento será acionado quando o diálogo terminar a animação de abertura.
`close.mdui.dialog`	O evento será acionado quando o diálogo iniciar a animação de fechamento.
`closed.mdui.dialog`	O evento será acionado quando o diálogo terminar a animação de fechamento.
`cancel.mdui.dialog`	O evento será acionado quando o botão de cancelamento for pressionado.
`confirm.mdui.dialog`	O evento será acionado quando o botão de confirmação for pressionado.

Diálogos predefinidos

O mdui encapsulou várias funções de diálogo predefinidas para cenários comuns; esses diálogos são chamados apenas via JavaScript, sem necessidade de escrever código HTML.

Todas essas funções retornam instâncias de diálogo.

mdui.dialog()

Abre um diálogo onde título, conteúdo, botões, etc., podem ser personalizados. Este método é versátil; os métodos mdui.alert(), mdui.confirm() e mdui.prompt() a seguir são encapsulados usando este método.

mdui.dialog(options)

Exemplo

mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: 'Cancelar'
    },
    {
      text: 'Confirmar',
      onClick: function(inst){
        mdui.alert('Chamada de retorno ao clicar no botão de confirmação');
      }
    }
  ]
});

Parâmetro

Nome do parâmetro	Tipo	Valor padrão	Descrição
`title`	`string`		O título do diálogo.
`content`	`string`		O conteúdo do diálogo.
`buttons`	`array`		Matriz de botões, onde cada botão é um objeto com parâmetros de botão (veja a tabela abaixo).
`stackedButtons`	`boolean`	`false`	Se os botões devem ser organizados verticalmente.
`cssClass`	`string`		Classe CSS adicionada ao `.mdui-dialog`.
`history`	`boolean`	`true`	Se deve escutar o evento `hashchange`; se for true, o diálogo pode ser fechado via tecla voltar do Android ou botão de retrocesso do navegador.
`overlay`	`boolean`	`true`	Se deve exibir a sobreposição após abrir o diálogo.
`modal`	`boolean`	`false`	Se o diálogo deve ser modal. Se for false, clicar na área fora do diálogo o fechará; caso contrário, não fechará.
`closeOnEsc`	`boolean`	`true`	Se deve fechar o diálogo ao pressionar a tecla Esc.
`destroyOnClosed`	`boolean`	`true`	Se deve destruir automaticamente o diálogo após fechá-lo.
`onOpen`	`function`		Chamada de retorno quando a animação de abertura inicia. O parâmetro é a instância do diálogo.
`onOpened`	`function`		Chamada de retorno quando a animação de abertura termina. O parâmetro é a instância do diálogo.
`onClose`	`function`		Chamada de retorno quando a animação de fechamento inicia. O parâmetro é a instância do diálogo.
`onClosed`	`function`		Chamada de retorno quando a animação de fechamento termina. O parâmetro é a instância do diálogo.

Parâmetros do botão:

Nome do parâmetro	Tipo	Valor padrão	Descrição
`text`	`string`		Texto do botão.
`bold`	`boolean`	`false`	Se o texto do botão deve estar em negrito.
`close`	`boolean`	`true`	Se deve fechar o diálogo após clicar no botão.
`onClick`	`function`		Função de retorno de chamada ao clicar no botão.

mdui.alert()

Abre um alerta que pode conter um título, conteúdo e um botão de confirmação:

mdui.alert(text, onConfirm, options)

mdui.alert(text, title, onConfirm, options)

Exemplo

// Apenas texto
mdui.alert('content');

// Com título e texto
mdui.alert('content', 'title');

// Com retorno de chamada
mdui.alert('content', 'title', function() {
  mdui.alert('Clicou no botão de confirmação');
});

// Com texto e retorno de chamada
mdui.alert('content', function() {
  mdui.alert('Clicou no botão de confirmação');
});

text: Texto
title: (opcional) Título
onConfirm: (opcional) Chamada de retorno ao clicar no botão de confirmação. O parâmetro é a instância do diálogo.
options: (opcional) Parâmetros, veja a tabela abaixo.

Nome do parâmetro	Tipo	Valor padrão	Descrição
`confirmText`	`string`	`ok`	Texto do botão de confirmação.
`history`	`boolean`	`true`	Se deve escutar o evento `hashchange`; se for true, o diálogo pode ser fechado via tecla voltar do Android ou botão de retrocesso do navegador.
`modal`	`boolean`	`false`	Se o diálogo deve ser modal. Se for false, clicar na área fora do diálogo o fechará; caso contrário, não fechará.
`closeOnEsc`	`boolean`	`true`	Se deve fechar o diálogo ao pressionar a tecla Esc.
`closeOnConfirm`	`boolean`	`true`	Se deve fechar o diálogo ao pressionar o botão de confirmação.

mdui.confirm()

Abre uma caixa de confirmação que pode conter um título, conteúdo, um botão de confirmação e um botão de cancelamento:

mdui.confirm(text, onConfirm, onCancel, options)

mdui.confirm(text, title, onConfirm, onCancel, options)

Exemplo

// Com texto e retorno de confirmação
mdui.confirm('content', function(){
  mdui.alert('Clicou no botão de confirmação');
});

// Com texto, retorno de confirmação e retorno de cancelamento
mdui.confirm('content',
  function(){
    mdui.alert('Clicou no botão de confirmação');
  },
  function(){
    mdui.alert('Clicou no botão de cancelamento');
  }
);

// Com texto, título e retorno de confirmação
mdui.confirm('content', 'title', function(){
  mdui.alert('Clicou no botão de confirmação');
});

// Com texto, título, retorno de confirmação e retorno de cancelamento
mdui.confirm('content', 'title',
  function(){
    mdui.alert('Clicou no botão de confirmação');
  },
  function(){
    mdui.alert('Clicou no botão de cancelamento');
  }
);

text: Texto
title: (opcional) Título
onConfirm: (opcional) Chamada de retorno ao clicar no botão de confirmação. O parâmetro é a instância do diálogo.
onCancel: (opcional) Chamada de retorno ao clicar no botão de cancelamento. O parâmetro é a instância do diálogo.
options: (opcional) Parâmetros, veja a tabela abaixo.

Nome do parâmetro	Tipo	Valor padrão	Descrição
`confirmText`	`string`	`ok`	Texto do botão de confirmação.
`cancelText`	`string`	`cancel`	Texto do botão de cancelamento.
`history`	`boolean`	`true`	Se deve escutar o evento `hashchange`; se for true, o diálogo pode ser fechado via tecla voltar do Android ou botão de retrocesso do navegador.
`modal`	`boolean`	`false`	Se o diálogo deve ser modal. Se for false, clicar na área fora do diálogo o fechará; caso contrário, não fechará.
`closeOnEsc`	`boolean`	`true`	Se deve fechar o diálogo ao pressionar a tecla Esc.
`closeOnCancel`	`boolean`	`true`	Se deve fechar o diálogo ao pressionar o botão de cancelamento.
`closeOnConfirm`	`boolean`	`true`	Se deve fechar o diálogo ao pressionar o botão de confirmação.

mdui.prompt()

Abre um diálogo solicitando entrada do usuário, que pode conter um título, conteúdo, campo de texto, um botão de confirmação e um botão de cancelamento:

mdui.prompt(label, onConfirm, onCancel, options)

mdui.prompt(label, title, onConfirm, onCancel, options)

Exemplo

// Campo de texto de linha única
mdui.prompt('Este é um campo de texto de linha única',
  function (value) {
    mdui.alert('Você inseriu:' + value + ', Clicou no botão de confirmação');
  },
  function (value) {
    mdui.alert('Você inseriu:' + value + ', Clicou no botão de cancelamento');
  }
);

// Campo de texto de várias linhas
mdui.prompt('Este é um campo de texto de várias linhas',
  function (value) {
    mdui.alert('Você inseriu:' + value + ', Clicou no botão de confirmação');
  },
  function (value) {
    mdui.alert('Você inseriu:' + value + ', Clicou no botão de cancelamento');
  },
  {
    type: 'textarea'
  }
);

// Com título
mdui.prompt('Por favor, insira o texto', 'title',
  function (value) {
    mdui.alert('Você inseriu:' + value + ', Clicou no botão de confirmação');
  },
  function (value) {
    mdui.alert('Você inseriu:' + value + ', Clicou no botão de cancelamento');
  }
);

label: Texto do rótulo flutuante do campo de texto
title: (opcional) Título
onConfirm: (opcional) Chamada de retorno ao clicar no botão de confirmação. Contém dois parâmetros: o valor do campo de texto e a instância do diálogo.
onCancel: (opcional) Chamada de retorno ao clicar no botão de cancelamento. Contém dois parâmetros: o valor do campo de texto e a instância do diálogo.
options: (opcional) Parâmetros, veja a tabela abaixo

Nome do parâmetro	Tipo	Valor padrão	Descrição
`confirmText`	`string`	`ok`	Texto do botão de confirmação
`cancelText`	`string`	`cancel`	Texto do botão de cancelamento
`history`	`boolean`	`true`	Se deve escutar o evento `hashchange`; se for true, o diálogo pode ser fechado via tecla voltar do Android ou botão de retrocesso do navegador.
`modal`	`boolean`	`false`	Se o diálogo deve ser modal. Se for false, clicar na área fora do diálogo o fechará; caso contrário, não fechará.
`closeOnEsc`	`boolean`	`true`	Se deve fechar o diálogo ao pressionar a tecla Esc.
`closeOnCancel`	`boolean`	`true`	Se deve fechar o diálogo ao pressionar o botão de cancelamento
`closeOnConfirm`	`boolean`	`true`	Se deve fechar o diálogo ao pressionar o botão de confirmação
`confirmOnEnter`	`boolean`	`false`	Aciona a função de retorno `onConfirm` ao pressionar a tecla Enter.
`type`	`string`	`text`	Tipo do campo de texto. `text`: Campo de texto de linha única `textarea`: Campo de texto de várias linhas
`maxlength`	`int`	`0`	Número máximo de caracteres de entrada
`defaultValue`	`string`	`''`	Valor padrão do campo de texto

Lista de classes CSS

Nome da classe	Descrição
`.mdui-dialog`	Define um componente de diálogo.
`.mdui-dialog-title`	Define o título do diálogo.
`.mdui-dialog-content`	Define o conteúdo do diálogo.
`.mdui-dialog-actions`	Define a barra de ações do diálogo.
`.mdui-dialog-actions-stacked`	Empilha verticalmente os botões na barra de ações do diálogo.

Tabela