Notify system

Create notifies simple and easy with Metro UI.

About

The system of notifications is intended for informing users about the processes occurring on the site or in the application. Metro UI contains object Metro.notify to create notifies. To create notify execute method create of Metro.notify object. The method create has three parameters:

• message - notification message
• title - notification title
• options - notification options

                    <button class="button" onclick="showNotify();">Notify Me</button>
                    <script>
                        function showNotify(){
                            Metro.notify.create("This is a notify", "Title", {});
                        }
                    </script>
                

Setup system

For the notification system in Metro UI, a number of parameters are defined:

• container - where notifies showing (default: null)
• width - notifies width (default: 220px)
• timeout - timeout before the notify is close (default: 2000)
• duration - animation duration (default: 300)
• distance - distance where animation started (default: 100vh)
• animation - animation function (default: swing). See easing utilities

You can change this options with setup method of Metro.notify object. The reset method returns the default values.

                    <button class="button secondary" onclick="showSetupDemo()">Setup demo</button>
                    <script>
                        function showSetupDemo(){
                            var notify = Metro.notify;
                            notify.setup({
                                width: 300,
                                duration: 1000,
                                animation: 'easeOutBounce'
                            });
                            notify.create("This is a notify");
                            notify.reset();
                        }
                    </script>
                

Notify options

For each notify you can set own options:

• keepOpen - if true the notification will not be automatically closed, user must click on notify to close it.
• cls - additional class(es) for the notification
• width - notification width
• onShow - function to be performed after the notification is showed
• onClose - function to be performed after the notification is closed

                    <button class="button info" onclick="showKeepOpenDemo()">Keep open demo</button>
                    <button class="button dark" onclick="showCallbackDemo()">Callback demo</button>
                    <script>
                        function showClassDemo(){
                            var notify = Metro.notify;
                            notify.create("This is a notify with additional class.", "Alert", {
                                cls: "alert"
                            });
                        }
                        function showKeepOpenDemo(){
                            var notify = Metro.notify;
                            notify.create("This is a notify. Click me to close", null, {
                                keepOpen: true
                            });
                        }
                        function showCallbackDemo(){
                            var notify = Metro.notify;
                            notify.create("This is a notify", null, {
                                onClose: function(){
                                    alert('Hi from notification callback');
                                }
                            });
                        }
                    </script>