material icon indicating copy to clipboard operation
material copied to clipboard

Snackbar documentation doesn't include JS trigger instructions

Open cweitat opened this issue 5 years ago • 2 comments

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"
                })
            }
        });

cweitat avatar Dec 19 '19 19:12 cweitat

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.

sesemaya avatar Jan 06 '20 01:01 sesemaya

Hi, no need for custom snackbars anymore, just use Bootstrap toasts.

https://djibe.github.io/material/docs/4.5/material/snackbars/

djibe avatar May 08 '20 12:05 djibe