Toast

Toasts are used for system messaging. They also display at the bottom of the screen, but may not be swiped off-screen. Metro 4 provides simple methods to create toasts.

Create toast

To create toast you must call method Metro.toast.create. Method contains next parameters:

• message: Toast message
• callback: Callback function.Executed after toast hided
• timeout: Time to show toast
• cls: Classes to customize toast

                    Metro.toast.create(message, callback, timeout, cls);
                

Quick example

                    <button class="button primary" onclick="runToast()">Default toast</button>
                    <button class="button secondary" onclick="runToast('callback')">Toast with a callback</button>
                    <button class="button info" onclick="runToast('timeout')">Toast timeout</button>
                    <button class="button success" onclick="runToast('class')">Toast custom class</button>

                    <script>
                        function runToast(mode) {
                            var toast = Metro.toast.create;
                            switch (mode) {
                                case 'callback': toast("This is a toast with callback", function(){
                                    alert('Toast callback executed!');
                                }); break;
                                case 'timeout': toast("This is a toast with timeout 5s", null, 5000); break;
                                case 'class': toast("This is a toast with custom class", null, 5000, "bg-green fg-white"); break;
                                default: toast("This is default toast");
                            }
                        }
                    </script>
                

Callback

If you need execute code after toast showing, add callback function to call toast.

                    Metro.toast.create("Toast message", function(){
                        ...callback function...
                    });
                

Timeout

Want to show the toast a certain time? Add a timeout parameter.

                    Metro.toast.create("Toast message", null, 5000);
                

Custom toast

If you want to display a toast in your own style, add a cls parameter.

                    Metro.toast.create("Toast message", null, null, cls);