SnackbarSnackbar
El componente Snackbar se usa para presentar mensajes breves sobre el estado de la aplicación en la página.
Además de usar el componente directamente, mdui también ofrece una función mdui.snackbar para simplificar el uso del componente Snackbar.
Importa el componente cuando lo necesites:
import 'mdui/components/snackbar.js';
Importa el tipo TypeScript cuando lo necesites:
import type { Snackbar } from 'mdui/components/snackbar.js';
Uso:
Foto archivada
Abrir Snackbar
<mdui-snackbar class="example-snackbar">Foto archivada</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-snackbar");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
El atributo placement define la posición de visualización del Snackbar.
Foto archivada
top-start
Foto archivada
top
Foto archivada
top-end
Foto archivada
bottom-start
Foto archivada
bottom
Foto archivada
bottom-end
<div class="example-placement">
<div class="row">
<mdui-snackbar placement="top-start">Foto archivada</mdui-snackbar>
<mdui-button variant="outlined">top-start</mdui-button>
<mdui-snackbar placement="top">Foto archivada</mdui-snackbar>
<mdui-button variant="outlined">top</mdui-button>
<mdui-snackbar placement="top-end">Foto archivada</mdui-snackbar>
<mdui-button variant="outlined">top-end</mdui-button>
</div>
<div class="row">
<mdui-snackbar placement="bottom-start">Foto archivada</mdui-snackbar>
<mdui-button variant="outlined">bottom-start</mdui-button>
<mdui-snackbar placement="bottom">Foto archivada</mdui-snackbar>
<mdui-button variant="outlined">bottom</mdui-button>
<mdui-snackbar placement="bottom-end">Foto archivada</mdui-snackbar>
<mdui-button variant="outlined">bottom-end</mdui-button>
</div>
</div>
<script>
const snackbars = document.querySelectorAll(".example-placement mdui-snackbar");
snackbars.forEach((snackbar) => {
const button = snackbar.nextElementSibling;
button.addEventListener("click", () => snackbar.open = true);
});
</script>
<style>
.example-placement mdui-button {
margin: 0.25rem;
width: 7.5rem;
}
</style>
Fuente
El atributo action añade un botón de acción en el lado derecho del Snackbar y especificar el texto del botón mediante este atributo. Al hacer clic en el botón de acción se activa el evento action-click. Si quieres que el botón de acción se muestre en estado de carga, añade el atributo action-loading.
Foto archivada
Abrir Snackbar
<mdui-snackbar action="Deshacer" class="example-action">Foto archivada</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-action");
const openButton = snackbar.nextElementSibling;
snackbar.addEventListener("action-click", () => {
snackbar.actionLoading = true;
setTimeout(() => snackbar.actionLoading = false, 2000);
});
openButton.addEventListener("click", () => snackbar.open = true);
</script>
FuenteTambién puedes añadir un elemento personalizado en el lado derecho del Snackbar mediante el slot action.
Foto archivada
Deshacer
Abrir Snackbar
<mdui-snackbar class="example-action-slot">
Foto archivada
<mdui-button slot="action" variant="text">Deshacer</mdui-button>
</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-action-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Fuente
El atributo closeable, aparece un botón de cierre en el lado derecho del Snackbar. Al hacer clic en este botón se cierra el Snackbar y se activa el evento close.
Foto archivada
Abrir Snackbar
<mdui-snackbar closeable class="example-closeable">Foto archivada</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-closeable");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
FuentePuedes personalizar el elemento del botón de cierre mediante el slot close-button.
Foto archivada
Abrir Snackbar
<mdui-snackbar closeable class="example-close-button-slot">
Foto archivada
<mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-button-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
FuenteEl atributo close-icon, puedes modificar el icono de Material Icons en el botón de cierre predeterminado. También puedes personalizar el elemento del icono en el botón de cierre mediante el slot close-icon.
Foto archivada
Abrir Snackbar
<mdui-snackbar
closeable
close-icon="delete"
class="example-close-icon"
>Foto archivada</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-icon");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Fuente
Por defecto, el texto del mensaje no tiene límite de líneas. Con el atributo message-line puedes limitar el texto a un máximo de 2 líneas.
El elemento ya tiene la etiqueta "viaje". También puedes añadir una nueva etiqueta. También puedes añadir una nueva etiqueta.
Abrir Snackbar
<mdui-snackbar message-line="1" class="example-line">El elemento ya tiene la etiqueta "viaje". También puedes añadir una nueva etiqueta. También puedes añadir una nueva etiqueta.</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-line");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Fuente
El atributo auto-close-delay define el retraso de cierre automático, en milisegundos. El valor predeterminado es 5000 milisegundos.
Foto archivada
Abrir Snackbar
<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Foto archivada</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-delay");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Fuente
El atributo close-on-outside-click hace que el Snackbar se cierre al hacer clic fuera del área del Snackbar.
Foto archivada
Abrir Snackbar
<mdui-snackbar close-on-outside-click class="example-outside">Foto archivada</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-outside");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Fuente| Atributo | Propiedad | Reflect | Tipo | Predeterminado |
|---|
open | open | | boolean | false |
Indica si se muestra el Snackbar.
|
placement | placement | | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom' |
Posición del Snackbar. Por defecto es bottom. Los valores posibles son:
top: Centrada arribatop-start: Arriba, alineada a la izquierdatop-end: Arriba, alineada a la derechabottom: Centrada abajobottom-start: Abajo, alineada a la izquierdabottom-end: Abajo, alineada a la derecha
|
action | action | | string | - |
Texto del botón de acción. También se puede definir un botón de acción mediante slot="action".
|
action-loading | actionLoading | | boolean | false |
Indica si el botón de acción está en estado de carga.
|
closeable | closeable | | boolean | false |
Indica si se muestra un botón de cierre a la derecha.
|
close-icon | closeIcon | | string | - |
Nombre del icono de Material Icons para el botón de cierre. También se puede establecer mediante slot="close-icon".
|
message-line | messageLine | | 1 | 2 | - |
Número máximo de líneas mostradas para el mensaje. Por defecto sin límite. Los valores posibles son:
1: Mostrar como máximo una línea2: Mostrar como máximo dos líneas
|
auto-close-delay | autoCloseDelay | | number | 5000 |
Tiempo de retraso para el cierre automático (en milisegundos). Establecer en 0 para no cerrar automáticamente. Por defecto 5000 milisegundos.
|
close-on-outside-click | closeOnOutsideClick | | boolean | false |
Indica si el Snackbar se cierra al hacer clic o tocar fuera de su área.
|
| Nombre |
|---|
open |
Se dispara cuando el Snackbar comienza a mostrarse. Se puede evitar que se muestre llamando a event.preventDefault().
|
opened |
Se dispara cuando la animación de mostrar del Snackbar se completa.
|
close |
Se dispara cuando el Snackbar comienza a ocultarse. Se puede evitar que se oculte llamando a event.preventDefault().
|
closed |
Se dispara cuando la animación de ocultar del Snackbar se completa.
|
action-click |
Se dispara al hacer clic en el botón de acción.
|
| Nombre |
|---|
| (predeterminado) |
Contenido del mensaje del Snackbar.
|
action |
Botón de acción a la derecha.
|
close-button |
Botón de cierre a la derecha. Se debe establecer el atributo closeable en true para que se muestre.
|
close-icon |
Icono dentro del botón de cierre.
|
| Nombre |
|---|
--shape-corner |
Tamaño de la esquina redondeada del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.
|
--z-index |
Valor CSS z-index del componente.
|
Capítulo anterior
Slider Slider
Capítulo siguiente
Switch Switch
