Notify

The Notify component provides a flexible notification system for displaying messages, alerts, and notifications to users. It supports customizable appearance, positioning, and behavior.

Dependencies

• Metro UI Core
• DOM library

Usage

Basic Notification

// Create a simple notification
Metro.notify.create("This is a notification message");

// Create a notification with title
Metro.notify.create("This is a notification message", "Notification Title");

// Create a notification with custom options
Metro.notify.create("This is a notification message", "Notification Title", {
    width: 300,
    keepOpen: true,
    clsNotify: "alert"
});

Notification Positioning

By default, notifications appear in the top-right corner of the screen. You can change this by adding positioning classes to the container:

// Create a notification container at the top-left
const container = $("<div>").addClass("notify-container position-left");
$("body").prepend(container);

// Use this container for notifications
Metro.notify.setup({
    container: container
});

Removing Notifications

// Remove all notifications
Metro.notify.killAll();

// Remove a specific notification (usually handled automatically)
Metro.notify.kill($("#notification-id"));

Plugin Parameters

The Notify component accepts the following configuration options:

Parameter	Type	Default	Description
container	element	null	Container element for notifications (created automatically if null)
width	number	220	Width of notification in pixels
timeout	number	3000	Time in milliseconds before notification automatically closes
duration	number	200	Animation duration in milliseconds
distance	string/number	"max"	Animation distance (“max” or specific pixel value)
animation	string	"linear"	Animation easing function
clsNotify	string	""	Additional CSS class(es) for notification element

Events

Event	Description
onClick	Triggered when notification is clicked
onClose	Triggered when notification is closed
onShow	Triggered when notification is shown
onAppend	Triggered when notification is appended to container
onNotifyCreate	Triggered when notification is created

API Methods

The Notify component provides the following methods:

Method	Parameters	Description
setup(options)	options: object	Configure notification system with options
reset()	-	Reset options to default values
create(message, title, options)	message: string, title: string, options: object	Create and show a notification
kill(notify, callback)	notify: element, callback: function	Remove a specific notification
killAll()	-	Remove all notifications

Create Method Options

When using the create() method, you can pass the following options:

Option	Type	Description
keepOpen	boolean	If true, notification won’t auto-close
clsNotify	string	Additional CSS class(es) for this notification
width	number	Width for this specific notification
duration	number	Animation duration for this notification
animation	string	Animation type for this notification
distance	string/number	Animation distance for this notification
onClick	function	Click handler for this notification
onClose	function	Close handler for this notification
onShow	function	Show handler for this notification
onAppend	function	Append handler for this notification

Styling with CSS Variables

The Notify component can be styled using the following CSS variables:

Variable	Default (Light)	Dark Mode	Description
--notify-container-background	transparent	transparent	Background color of the notification container
--notify-border-radius	4px	4px	Border radius of notifications
--notify-border-color	#e8e8e8	#4a4d51	Border color of notifications
--notify-background	#ffffff	#26282e	Background color of notifications
--notify-color	#191919	#dbdfe7	Text color of notifications

Example of Custom Styling

/* Custom styling for notifications */
.custom-notify {
    --notify-background: #e3f2fd;
    --notify-color: #0d47a1;
    --notify-border-color: #2196f3;
    --notify-border-radius: 8px;
}

Available CSS Classes

Container Classes

• .notify-container - Container for notifications
• .position-left - Position container on the left side
• .position-top - Position container at the top (full width)
• .position-bottom - Position container at the bottom (full width)

Notification Classes

• .notify - Base class for notifications
• .notify-title - Title element of notification
• .notify-message - Message element of notification

Best Practices

1. Keep notification messages brief and clear
2. Use titles for important notifications to draw attention
3. Consider using different CSS classes for different notification types (info, warning, error)
4. Set appropriate timeout values based on message importance and length
5. For critical notifications, use the keepOpen: true option to require user interaction
6. Consider accessibility by ensuring notifications have sufficient contrast and readable text