@extends('../themes/' . $activeTheme . '/' . $activeLayout) @section('subhead') Notification - Midone - Tailwind Admin Dashboard Template @endsection @section('subcontent')

Notification

Basic Notification

Show example code
Yay! Updates Published!
Review Changes Show Non Sticky Notification Show Sticky Notification
Yay! Updates Published!
Review Changes Show Non Sticky Notification Show Sticky Notification
// 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
Message Saved!
The message will be sent in 5 minutes.
Show Notification
Message Saved!
The message will be sent in 5 minutes.
Show Notification
// 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
Storage Removed!
The server will restart in 30 seconds, don't make
changes during the update process!
Restart Now Cancel
Show Notification
Storage Removed!
The server will restart in 30 seconds, don't make
changes during the update process!
Restart Now Cancel
Show Notification
// 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
Midone - Tailwind Admin Dashboard Template
{{ $fakers[0]['users'][0]['name'] }}
See you later! 😃😃😃
Reply Show Notification
Midone - Tailwind Admin Dashboard Template
{{ $fakers[0]['users'][0]['name'] }}
See you later! 😃😃😃
Reply Show Notification
// 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
Introducing new theme
Release version 2.3.3
View Details Dismiss
Show Notification
Introducing new theme
Release version 2.3.3
View Details Dismiss
Show Notification
// 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
{{ $fakers[0]['users'][0]['name'] }}
Sent you new documents.
Preview Download
Show Notification
{{ $fakers[0]['users'][0]['name'] }}
Sent you new documents.
Preview Download
Show Notification
// 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(); });
@endsection @pushOnce('vendors') @vite('resources/js/vendors/toastify.js') @endPushOnce @pushOnce('scripts') @vite('resources/js/pages/notification.js') @endPushOnce