El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Diálogos

El componente de diálogo de mdui es muy versátil y se usa con frecuencia para pedir información a los usuarios, informarles o advertirles.

Solo puede haber un diálogo visible a la vez. Si se abre otro antes de que se cierre el actual, se añadirá a la cola y se abrirá cuando se cierre el anterior.

Modo de uso

Llamada vía atributos
Llamada vía JavaScript

Lectura relacionada

Pautas de diseño de Material Design: componentes - Diálogo

Estilo

Diálogo estándar

Este es un diálogo estándar.

Ejemplo

<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>

Sin barra de título

Este diálogo no tiene barra de título.

Ejemplo

<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>

Botones apilados

Los botones de la parte inferior del diálogo se alinean horizontalmente de forma predeterminada. Solo tienes que agregar la clase .mdui-dialog-actions-stacked a <div class="mdui-dialog-actions"></div> para apilar los botones verticalmente.

Ejemplo

<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 y botones fijos

Cuando el contenido del diálogo supera la altura del diálogo, aparecerá una barra de desplazamiento en .mdui-dialog-content.

Si colocas .mdui-dialog-title y .mdui-dialog-actions dentro de .mdui-dialog-content, el título y los botones inferiores se desplazarán con el contenido; de lo contrario, el título y los botones permanecerán fijos en la parte superior e inferior, respectivamente, y no se desplazarán.

Ejemplo

<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>

Contenido personalizado

En un diálogo, solo <div class="mdui-dialog"></div> es obligatorio; el contenido dentro de ese elemento puede reemplazarse por cualquier HTML.

En el ejemplo siguiente, se ha colocado una pestaña dentro de un diálogo:

Ejemplo

<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>

Modo de uso

Llamada vía atributos

Con este enfoque no hace falta escribir JavaScript. Solo tienes que añadir el atributo mdui-dialog="options" a un elemento de control (por ejemplo, un botón). Al usar este método con atributos personalizados, también es necesario un parámetro adicional target para especificar el diálogo que se va a controlar; su valor debe ser el selector CSS del diálogo de destino.

Ejemplo

<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>

Puedes agregar atributos a los elementos dentro del diálogo para enlazar eventos, y también funcionan cuando se invocan mediante JavaScript.

Atributo	Descripción
`mdui-dialog-close`	Al hacer clic en este elemento se activará el evento `close.mdui.dialog` y se cerrará el diálogo.
`mdui-dialog-cancel`	Al hacer clic en este elemento se activará el evento `cancel.mdui.dialog`.
`mdui-dialog-confirm`	Al hacer clic en este elemento se activará el evento `confirm.mdui.dialog`.

Llamada vía JavaScript

Instanciar el componente:

// selector es el selector CSS, el elemento DOM o la cadena HTML del diálogo
// options son los parámetros de configuración; consulta la lista de parámetros de abajo
var inst = new mdui.Dialog(selector, options);

Ejecutar

Parámetro

Nombre	Tipo	Valor por defecto	Descripción
`overlay`	`boolean`	`true`	Si se muestra una capa de superposición al abrir el diálogo.
`history`	`boolean`	`true`	Si se añade un hash de URL al abrir el diálogo. Si es true, el diálogo se puede cerrar mediante el botón Atrás del navegador o el botón de retroceso de Android después de abrirlo.
`modal`	`boolean`	`false`	Si el diálogo es modal. Si es false, al hacer clic en el área fuera del diálogo se cerrará; de lo contrario, no se cerrará.
`closeOnEsc`	`boolean`	`true`	Si se cierra el diálogo al pulsar la tecla Esc.
`closeOnCancel`	`boolean`	`true`	Si se cierra el diálogo al pulsar el botón Cancelar.
`closeOnConfirm`	`boolean`	`true`	Si se cierra el diálogo al pulsar el botón Confirmar.
`destroyOnClosed`	`boolean`	`false`	Si se destruye automáticamente el diálogo después de cerrarse.

Método

Nombre del método	Descripción
`open()`	Abrir el diálogo.
`close()`	Cerrar el diálogo.
`toggle()`	Alternar el estado abierto del diálogo.
`getState()`	Obtener el estado del diálogo. Incluye cuatro estados (`opening`, `opened`, `closing`, `closed`).
`destroy()`	Destruir el diálogo.
`handleUpdate()`	Reajustar la posición del diálogo y la altura de la barra de desplazamiento. Si el contenido del diálogo cambia después de abrirlo, hay que llamar a este método.

Evento

Nombre del evento	Descripción	Objetivo	Parámetros
`open.mdui.dialog`	El evento se activará cuando comience la animación de apertura del diálogo.	`<div class="mdui-dialog"></div>`	`event._detail.inst`: instancia
`opened.mdui.dialog`	El evento se activará cuando termine la animación de apertura del diálogo.
`close.mdui.dialog`	El evento se activará cuando comience la animación de cierre del diálogo.
`closed.mdui.dialog`	El evento se activará cuando termine la animación de cierre del diálogo.
`cancel.mdui.dialog`	El evento se activará cuando se pulse el botón Cancelar.
`confirm.mdui.dialog`	El evento se activará cuando se pulse el botón Confirmar.

Diálogos predefinidos

mdui ha encapsulado varias funciones de diálogo predefinidas para escenarios comunes. Estos diálogos predefinidos se invocan solo mediante JavaScript y no requieren escribir código HTML.

Todas estas funciones devuelven una instancia del diálogo.

mdui.dialog()

Abre un diálogo en el que se pueden personalizar el título, el contenido, los botones, etc. Este método es general, y mdui.alert(), mdui.confirm() y mdui.prompt() se implementan mediante él.

mdui.dialog(options)

Ejemplo

mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: 'Cancelar'
    },
    {
      text: 'Confirmar',
      onClick: function(inst){
        mdui.alert('Devolución de llamada al hacer clic en el botón de confirmación');
      }
    }
  ]
});

Parámetro

Nombre	Tipo	Valor por defecto	Descripción
`title`	`string`		El título del diálogo.
`content`	`string`		El contenido del diálogo.
`buttons`	`array`		Una matriz de botones, donde cada botón es un objeto con parámetros del botón (consulta la tabla siguiente).
`stackedButtons`	`boolean`	`false`	Si los botones se apilan verticalmente.
`cssClass`	`string`		Clases CSS añadidas a `.mdui-dialog`.
`history`	`boolean`	`true`	Si se escucha el evento `hashchange`. Si es true, el diálogo se puede cerrar mediante el botón Atrás de Android o el botón Atrás del navegador.
`overlay`	`boolean`	`true`	Si se muestra una capa de superposición después de abrir el diálogo.
`modal`	`boolean`	`false`	Si el diálogo es modal. Si es false, al hacer clic en el área fuera del diálogo se cerrará; de lo contrario, no se cerrará.
`closeOnEsc`	`boolean`	`true`	Si se cierra el diálogo al pulsar la tecla Esc.
`destroyOnClosed`	`boolean`	`true`	Si se destruye automáticamente el diálogo después de cerrarse.
`onOpen`	`function`		Función de devolución de llamada cuando empieza la animación de apertura. El argumento es la instancia del diálogo.
`onOpened`	`function`		Función de devolución de llamada cuando termina la animación de apertura. El argumento es la instancia del diálogo.
`onClose`	`function`		Función de devolución de llamada cuando empieza la animación de cierre. El argumento es la instancia del diálogo.
`onClosed`	`function`		Función de devolución de llamada cuando termina la animación de cierre. El argumento es la instancia del diálogo.

Parámetros del botón:

Nombre	Tipo	Valor por defecto	Descripción
`text`	`string`		Texto del botón.
`bold`	`boolean`	`false`	Si el texto del botón aparece en negrita.
`close`	`boolean`	`true`	Si se cierra el diálogo después de hacer clic en el botón.
`onClick`	`function`		Función de devolución de llamada al hacer clic en el botón.

mdui.alert()

Abre una alerta, que puede incluir un título, contenido y un botón de confirmación:

mdui.alert(text, onConfirm, options)

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

Ejemplo

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

// Incluye título y texto
mdui.alert('content', 'title');

// Incluye devolución de llamada
mdui.alert('content', 'title', function() {
  mdui.alert('Se hizo clic en el botón de confirmación');
});

// Incluye texto y devolución de llamada
mdui.alert('content', function() {
  mdui.alert('Se hizo clic en el botón de confirmación');
});

text: texto
title: (opcional) título
onConfirm: (opcional) devolución de llamada al hacer clic en el botón de confirmación. El argumento es la instancia del diálogo.
options: (opcional) parámetros; consulta la tabla siguiente.

Nombre	Tipo	Valor por defecto	Descripción
`confirmText`	`string`	`ok`	Texto del botón de confirmación.
`history`	`boolean`	`true`	Si se escucha el evento `hashchange`. Si es true, el diálogo se puede cerrar mediante el botón Atrás de Android o el botón Atrás del navegador.
`modal`	`boolean`	`false`	Si el diálogo es modal. Si es false, al hacer clic en el área fuera del diálogo se cerrará; de lo contrario, no se cerrará.
`closeOnEsc`	`boolean`	`true`	Si se cierra el diálogo al pulsar la tecla Esc.
`closeOnConfirm`	`boolean`	`true`	Si se cierra el diálogo al pulsar el botón de confirmación.

mdui.confirm()

Abre una ventana de confirmación, que puede incluir un título, contenido, un botón de confirmación y un botón de cancelación:

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

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

Ejemplo

// Incluye texto y devolución de llamada de confirmación
mdui.confirm('content', function(){
  mdui.alert('Se hizo clic en el botón de confirmación');
});

// Incluye texto, confirmación y devoluciones de llamada de cancelación
mdui.confirm('content',
  function(){
    mdui.alert('Se hizo clic en el botón de confirmación');
  },
  function(){
    mdui.alert('Se hizo clic en el botón de cancelación');
  }
);

// Incluye texto, título y devolución de llamada del botón de confirmación
mdui.confirm('content', 'title', function(){
  mdui.alert('Se hizo clic en el botón de confirmación');
});

// Incluye texto, título, botón de confirmación y devoluciones de llamada de cancelación
mdui.confirm('content', 'title',
  function(){
    mdui.alert('Se hizo clic en el botón de confirmación');
  },
  function(){
    mdui.alert('Se hizo clic en el botón de cancelación');
  }
);

text: texto
title: (opcional) título
onConfirm: (opcional) devolución de llamada al hacer clic en el botón de confirmación. El argumento es la instancia del diálogo.
onCancel: (opcional) devolución de llamada al hacer clic en el botón de cancelación. El argumento es la instancia del diálogo.
options: (opcional) parámetros; consulta la tabla siguiente.

Nombre	Tipo	Valor por defecto	Descripción
`confirmText`	`string`	`ok`	Texto del botón de confirmación.
`cancelText`	`string`	`cancel`	Texto del botón de cancelación.
`history`	`boolean`	`true`	Si se escucha el evento `hashchange`. Si es true, el diálogo se puede cerrar mediante el botón Atrás de Android o el botón Atrás del navegador.
`modal`	`boolean`	`false`	Si el diálogo es modal. Si es false, al hacer clic en el área fuera del diálogo se cerrará; de lo contrario, no se cerrará.
`closeOnEsc`	`boolean`	`true`	Si se cierra el diálogo al pulsar la tecla Esc.
`closeOnCancel`	`boolean`	`true`	Si se cierra el diálogo al pulsar el botón de cancelación.
`closeOnConfirm`	`boolean`	`true`	Si se cierra el diálogo al pulsar el botón de confirmación.

mdui.prompt()

Abre un diálogo que solicita al usuario una entrada; puede incluir un título, contenido, un campo de texto, un botón de confirmación y un botón de cancelación:

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

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

Ejemplo

// Campo de texto de una sola línea
mdui.prompt('Este es un campo de texto de una sola línea',
  function (value) {
    mdui.alert('Has introducido:' + value + ', Se hizo clic en el botón de confirmación');
  },
  function (value) {
    mdui.alert('Has introducido:' + value + ', Se hizo clic en el botón de cancelación');
  }
);

// Campo de texto multilínea
mdui.prompt('Este es un campo de texto multilínea',
  function (value) {
    mdui.alert('Has introducido:' + value + ', Se hizo clic en el botón de confirmación');
  },
  function (value) {
    mdui.alert('Has introducido:' + value + ', Se hizo clic en el botón de cancelación');
  },
  {
    type: 'textarea'
  }
);

// Incluye título
mdui.prompt('Introduce texto', 'title',
  function (value) {
    mdui.alert('Has introducido:' + value + ', Se hizo clic en el botón de confirmación');
  },
  function (value) {
    mdui.alert('Has introducido:' + value + ', Se hizo clic en el botón de cancelación');
  }
);

label: texto de la etiqueta flotante del campo de texto
title: (opcional) título
onConfirm: (opcional) devolución de llamada al hacer clic en el botón de confirmación. Incluye dos parámetros: el valor del campo de texto y la instancia del diálogo.
onCancel: (opcional) devolución de llamada al hacer clic en el botón de cancelación. Incluye dos parámetros: el valor del campo de texto y la instancia del diálogo.
options: (opcional) parámetros; consulta la tabla siguiente

Nombre	Tipo	Valor por defecto	Descripción
`confirmText`	`string`	`ok`	Texto del botón de confirmación
`cancelText`	`string`	`cancel`	Texto del botón de cancelación
`history`	`boolean`	`true`	Si se escucha el evento `hashchange`. Si es true, el diálogo se puede cerrar mediante el botón Atrás de Android o el botón Atrás del navegador.
`modal`	`boolean`	`false`	Si el diálogo es modal. Si es false, al hacer clic en el área fuera del diálogo se cerrará; de lo contrario, no se cerrará.
`closeOnEsc`	`boolean`	`true`	Si se cierra el diálogo al pulsar la tecla Esc.
`closeOnCancel`	`boolean`	`true`	Si se cierra el diálogo al pulsar el botón de cancelación
`closeOnConfirm`	`boolean`	`true`	Si se cierra el diálogo al pulsar el botón de confirmación
`confirmOnEnter`	`boolean`	`false`	Activa la función de devolución de llamada `onConfirm` al pulsar la tecla Intro.
`type`	`string`	`text`	Tipo del campo de texto. `text`: campo de texto de una sola línea `textarea`: campo de texto multilínea
`maxlength`	`int`	`0`	Número máximo de caracteres de entrada
`defaultValue`	`string`	`''`	Valor predeterminado del campo de texto

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-dialog`	Define un componente de diálogo.
`.mdui-dialog-title`	Define el título del diálogo.
`.mdui-dialog-content`	Define el contenido del diálogo.
`.mdui-dialog-actions`	Define la barra de acciones del diálogo.
`.mdui-dialog-actions-stacked`	Apila verticalmente los botones de la barra de acciones del diálogo.

Tablas

Menús