Daemonite / material

Material Design for Bootstrap 4
http://daemonite.github.io/material/
MIT License
3.2k stars 725 forks source link

Snackbar documentation doesn't include JS trigger instructions #238

Open cweitat opened 4 years ago

cweitat commented 4 years ago

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"
                })
            }
        });
sesemaya commented 4 years ago

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.

djibe commented 4 years ago

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

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