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

Snackbar

Snackbar muestra un pequeño cuadro emergente en la parte inferior de la ventana, que puede desaparecer automáticamente tras un tiempo o cuando el usuario hace clic o toca otra parte de la pantalla.

Solo puede mostrarse un Snackbar a la vez en la pantalla. Si se abre otro Snackbar mientras el anterior aún está abierto, el nuevo se añadirá a la cola y se mostrará cuando el Snackbar actual se cierre.

Modo de uso

Se puede invocar mediante mdui.snackbar(params).

Lectura relacionada

Pautas de diseño de Material Design: componentes - Snackbar y Toast

Método de uso

Snackbar se invoca directamente mediante JavaScript, sin necesidad de escribir un diseño HTML.

Hay dos formas de invocar Snackbar:

mdui.snackbar(message, params)
mdui.snackbar(params)

Ambas formas devuelven una instancia de Snackbar.

Parámetros admitidos por Snackbar:

Nombre	Tipo	Valor por defecto	Descripción
`message`	`string`		El texto del Snackbar. Al invocarlo mediante `mdui.snackbar(params)`, este parámetro no puede quedar vacío.
`timeout`	`int`	`4000`	Retraso de ocultación automática del Snackbar, en milisegundos. Si se establece en 0, no se cerrará automáticamente.
`position`	`string`	`bottom`	La posición del Snackbar. `bottom`: abajo `top`: arriba `left-top`: esquina superior izquierda `left-bottom`: esquina inferior izquierda `right-top`: esquina superior derecha `right-bottom`: esquina inferior derecha
`buttonText`	`string`		Texto del botón.
`buttonColor`	`string`	`#90CAF9`	Color del texto del botón, puede ser un nombre de color o un valor de color, como `red`, `#ffffff`, `rgba(255, 255, 255, 0.3)`, etc.
`closeOnButtonClick`	`boolean`	`true`	Si se cierra el Snackbar al hacer clic en el botón.
`closeOnOutsideClick`	`boolean`	`true`	Si se cierra el Snackbar al hacer clic o tocar fuera de él.
`onClick`	`function`		Función de devolución de llamada al hacer clic en el Snackbar.
`onButtonClick`	`function`		Función de devolución de llamada al hacer clic en el botón del Snackbar.
`onOpen`	`function`		Función de devolución de llamada cuando empieza a abrirse el Snackbar.
`onOpened`	`function`		Función de devolución de llamada cuando el Snackbar ya está abierto.
`onClose`	`function`		Función de devolución de llamada cuando empieza a cerrarse el Snackbar.
`onClosed`	`function`		Función de devolución de llamada cuando el Snackbar ya está cerrado.

Métodos que posee la instancia de Snackbar:

Nombre del método	Descripción
`close`	Cerrar el Snackbar. Una vez cerrado, el Snackbar se destruye.

Ejemplos

Snackbar normal

Ejemplo

mdui.snackbar({
  message: 'Message sent'
});

Snackbar con devolución de llamada

Ejemplo

mdui.snackbar({
  message: 'Archived',
  buttonText: 'undo',
  onClick: function(){
    mdui.alert('Se hizo clic en el Snackbar');
  },
  onButtonClick: function(){
    mdui.alert('Se hizo clic en el botón');
  },
  onClose: function(){
    mdui.alert('Se cerró');
  }
});

Snackbars en distintas posiciones

Ejemplo

mdui.snackbar({
  message: 'bottom',
  position: 'bottom',
});

mdui.snackbar({
  message: 'top',
  position: 'top',
});

mdui.snackbar({
  message: 'left-top',
  position: 'left-top',
});

mdui.snackbar({
  message: 'left-bottom',
  position: 'left-bottom',
});

mdui.snackbar({
  message: 'right-top',
  position: 'right-top',
});

mdui.snackbar({
  message: 'right-bottom',
  position: 'right-bottom',
});

Tooltips

Tablas