Notification - Midone - Tailwind HTML Admin Template

Basic Notification

Show example code

                                
                                    {{ str_replace('>', 'HTMLCloseTag', str_replace('<', 'HTMLOpenTag', '
                                        
                                        
                                            Yay! Updates Published!
                                            Review Changes
                                        
                                        
                                        
                                        
                                        
                                        
                                    ')) }}

                                
                                    {{ str_replace('>', 'HTMLCloseTag', str_replace('<', 'HTMLOpenTag', '
                                        // Basic non sticky notification
                                        $("#basic-non-sticky-notification-toggle").on("click", function () {
                                            Toastify({
                                                node: $("#basic-non-sticky-notification-content")
                                                    .clone()
                                                    .removeClass("hidden")[0],
                                                duration: 3000,
                                                newWindow: true,
                                                close: true,
                                                gravity: "top",
                                                position: "right",
                                                backgroundColor: "white",
                                                stopOnFocus: true,
                                            }).showToast();
                                        });

                                        // Basic sticky notification
                                        $("#basic-sticky-notification-toggle").on("click", function () {
                                            Toastify({
                                                node: $("#basic-non-sticky-notification-content")
                                                    .clone()
                                                    .removeClass("hidden")[0],
                                                duration: -1,
                                                newWindow: true,
                                                close: true,
                                                gravity: "top",
                                                position: "right",
                                                backgroundColor: "white",
                                                stopOnFocus: true,
                                            }).showToast();
                                        });
                                    ')) }}

Success Notification

Show example code

                                
                                    {{ str_replace('>', 'HTMLCloseTag', str_replace('<', 'HTMLOpenTag', '
                                        
                                        
                                            
                                            
                                                Message Saved!
                                                The message will be sent in 5 minutes.
                                            
                                        
                                        
                                        
                                        
                                        
                                    ')) }}

                                
                                    {{ str_replace('>', 'HTMLCloseTag', str_replace('<', 'HTMLOpenTag', '
                                        // Success notification
                                        $("#success-notification-toggle").on("click", function () {
                                            Toastify({
                                                node: $("#success-notification-content")
                                                    .clone()
                                                    .removeClass("hidden")[0],
                                                duration: -1,
                                                newWindow: true,
                                                close: true,
                                                gravity: "top",
                                                position: "right",
                                                stopOnFocus: true,
                                            }).showToast();
                                        });
                                    ')) }}

Notification With Actions

Show example code

                                
                                    {{ str_replace('>', 'HTMLCloseTag', str_replace('<', 'HTMLOpenTag', '
                                        
                                        
                                            
                                            
                                                Storage Removed!
                                                The server will restart in 30 seconds, don\'t make
 changes during the update process!
                                                
                                                    Restart Now
                                                    Cancel
                                                
                                            
                                        
                                        
                                        
                                        
                                        
                                    ')) }}

                                
                                    {{ str_replace('>', 'HTMLCloseTag', str_replace('<', 'HTMLOpenTag', '
                                        // Notification with actions
                                        $("#notification-with-actions-toggle").on("click", function () {
                                            Toastify({
                                                node: $("#notification-with-actions-content")
                                                    .clone()
                                                    .removeClass("hidden")[0],
                                                duration: -1,
                                                newWindow: true,
                                                close: true,
                                                gravity: "top",
                                                position: "right",
                                                stopOnFocus: true,
                                            }).showToast();
                                        });
                                    ')) }}

Notification With Avatar

Show example code

                                
                                    {{ str_replace('>', 'HTMLCloseTag', str_replace('<', 'HTMLOpenTag', '
                                        
                                        
                                            
                                                
                                            
                                            
                                                ' . $fakers[0]['users'][0]['name'] . '
                                                See you later! 😃😃😃
                                            
                                            Reply
                                        
                                        
                                        
                                        
                                        
                                    ')) }}

                                
                                    {{ str_replace('>', 'HTMLCloseTag', str_replace('<', 'HTMLOpenTag', '
                                        // Notification with avatar
                                        $("#notification-with-avatar-toggle").on("click", function () {
                                            // Init toastify
                                            let avatarNotification = Toastify({
                                                node: $("#notification-with-avatar-content")
                                                    .clone()
                                                    .removeClass("hidden")[0],
                                                duration: -1,
                                                newWindow: true,
                                                close: false,
                                                gravity: "top",
                                                position: "right",
                                                stopOnFocus: true,
                                            }).showToast();

                                            // Close notification event
                                            $(avatarNotification.toastElement)
                                                .find(\'[data-dismiss="notification"]\')
                                                .on("click", function () {
                                                    avatarNotification.hideToast();
                                                });
                                        });
                                    ')) }}

Notification With Split Buttons

Show example code

                                
                                    {{ str_replace('>', 'HTMLCloseTag', str_replace('<', 'HTMLOpenTag', '
                                        
                                        
                                            
                                                Introducing new theme
                                                Release version 2.3.3
                                            
                                            
                                                View Details
                                                Dismiss
                                            
                                        
                                        
                                        
                                        
                                        
                                    ')) }}

                                
                                    {{ str_replace('>', 'HTMLCloseTag', str_replace('<', 'HTMLOpenTag', '
                                        // Notification with split buttons
                                        $("#notification-with-split-buttons-toggle").on("click", function () {
                                            // Init toastify
                                            let splitButtonsNotification = Toastify({
                                                node: $("#notification-with-split-buttons-content")
                                                    .clone()
                                                    .removeClass("hidden")[0],
                                                duration: -1,
                                                newWindow: true,
                                                close: false,
                                                gravity: "top",
                                                position: "right",
                                                stopOnFocus: true,
                                            }).showToast();

                                            // Close notification event
                                            $(splitButtonsNotification.toastElement)
                                                .find(\'[data-dismiss="notification"]\')
                                                .on("click", function () {
                                                    splitButtonsNotification.hideToast();
                                                });
                                        });
                                    ')) }}

Notification With Buttons Below

Show example code

                                
                                    {{ str_replace('>', 'HTMLCloseTag', str_replace('<', 'HTMLOpenTag', '
                                        
                                        
                                            
                                            
                                                ' . $fakers[0]['users'][0]['name'] . '
                                                Sent you new documents.
                                                
                                                    Preview
                                                    Download
                                                
                                            
                                        
                                        
                                        
                                        
                                        
                                    ')) }}

                                
                                    {{ str_replace('>', 'HTMLCloseTag', str_replace('<', 'HTMLOpenTag', '
                                        // Notification with buttons below
                                        $("#notification-with-buttons-below-toggle").on("click", function () {
                                            // Init toastify
                                            Toastify({
                                                node: $("#notification-with-buttons-below-content")
                                                    .clone()
                                                    .removeClass("hidden")[0],
                                                duration: -1,
                                                newWindow: true,
                                                close: true,
                                                gravity: "top",
                                                position: "right",
                                                stopOnFocus: true,
                                            }).showToast();
                                        });
                                    ')) }}