material
material copied to clipboard
Snackbar documentation doesn't include JS trigger instructions
To add how to trigger snackbar with JS.
Adapted from docs.min.js
. Code as such
//close snackbar on click
$(".snackbar-btn").on("click", function () {
$(this).parent(".snackbar").removeClass("show")
});
//show snackbar on click and auto hide at either after 6000ms or button is click again to show new snackbar
$(".snackbar-toggler").on("click", function () {
var e = $(this).next(".snackbar");
if ($(".snackbar.show").length > 0) {
$(".snackbar.show").removeClass("show").one("webkitTransitionEnd transitionEnd", function () {
e.addClass(function () {
setTimeout(function () {
e.removeClass("show")
}, 6e3);
return "show"
})
})
} else {
e.addClass(function () {
setTimeout(function () {
e.removeClass("show")
}, 6e3);
return "show"
})
}
});
Hi @cweitat,
Those code were temporary hacks for demo purposes only.
We are upgrading Material to work with Bootstrap 4.4, and once done, toast should be triggered like https://getbootstrap.com/docs/4.4/components/toasts/#methods.
Hi, no need for custom snackbars anymore, just use Bootstrap toasts.
https://djibe.github.io/material/docs/4.5/material/snackbars/