snackbar

La función snackbar envuelve el componente <mdui-snackbar>. Con ella puedes mostrar un snackbar sin escribir el código HTML del componente.

Uso

Importa la función cuando lo necesites:

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

Ejemplo de uso:

abrir

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

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

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

  button.addEventListener("click", () => {
    snackbar({
      message: "Foto archivada",
      action: "Deshacer",
      onActionClick: () => console.log("clic en el botón de acción")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

La función recibe un objeto Options como argumento; el valor devuelto es la instancia del componente <mdui-snackbar>.

Options

Nombre del atributo	Tipo	Valor por defecto
`message`	`string`	-
Contenido del mensaje de texto en el Snackbar
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`bottom`
Posición donde aparece el Snackbar. El valor predeterminado es `bottom`. Los valores posibles son: `top`: en la parte superior, centrado `top-start`: en la parte superior, alineado a la izquierda `top-end`: en la parte superior, alineado a la derecha `bottom`: en la parte inferior, centrado `bottom-start`: en la parte inferior, alineado a la izquierda `bottom-end`: en la parte inferior, alineado a la derecha
`action`	`string`	-
Texto del botón de acción
`closeable`	`boolean`	`false`
Si se muestra un botón de cierre en el lado derecho
`messageLine`	`1 \| 2`	-
Número máximo de líneas para el mensaje de texto. Por defecto no hay límite de líneas. Los valores posibles son: `1`: el mensaje de texto muestra como máximo una línea `2`: el mensaje de texto muestra como máximo dos líneas
`autoCloseDelay`	`number`	`5000`
Tiempo después del cual se cierra automáticamente (en milisegundos). Si se establece en 0, no se cierra automáticamente. Por defecto se cierra automáticamente después de 5 segundos.
`closeOnOutsideClick`	`boolean`	`false`
Si se cierra el Snackbar al hacer clic o tocar fuera del área del Snackbar
`queue`	`string`	-
Nombre de la cola. Por defecto, la cola no está habilitada; al llamar a esta función varias veces, se mostrarán múltiples snackbars simultáneamente. Puedes pasar un nombre de cola en este parámetro. Las funciones snackbar con el mismo nombre de cola se abrirán una tras otra, esperando a que se cierre el snackbar anterior antes de abrir el siguiente.
`onClick`	`(snackbar: Snackbar) => void`	-
Función de callback al hacer clic en el Snackbar. El parámetro de la función es la instancia del snackbar, y `this` también apunta a la instancia del snackbar.
`onActionClick`	`(snackbar: Snackbar) => void \| boolean \| Promise<void>`	-
Función de callback al hacer clic en el botón de acción. El parámetro de la función es la instancia del snackbar, y `this` también apunta a la instancia del snackbar. Por defecto, el snackbar se cierra después de hacer clic; si el valor de retorno es `false`, no se cierra; si el valor de retorno es una promesa, el snackbar se cerrará después de que la promesa se resuelva.
`onOpen`	`(snackbar: Snackbar) => void`	-
Función de callback cuando el Snackbar comienza a mostrarse. El parámetro de la función es la instancia del snackbar, y `this` también apunta a la instancia del snackbar.
`onOpened`	`(snackbar: Snackbar) => void`	-
Función de callback cuando la animación de mostrar el Snackbar se completa. El parámetro de la función es la instancia del snackbar, y `this` también apunta a la instancia del snackbar.
`onClose`	`(snackbar: Snackbar) => void`	-
Función de callback cuando el Snackbar comienza a ocultarse. El parámetro de la función es la instancia del snackbar, y `this` también apunta a la instancia del snackbar.
`onClosed`	`(snackbar: Snackbar) => void`	-
Función de callback cuando la animación de ocultar el Snackbar se completa. El parámetro de la función es la instancia del snackbar, y `this` también apunta a la instancia del snackbar.

Capítulo anterior

prompt

Capítulo siguiente

getTheme