Alert

Overview

The $alert component is a custom alert system designed to provide developers with a simple yet powerful way to display various types of alerts in web applications. It offers flexibility in customization, allowing developers to create alerts with different messages, styles, and behaviors.

Purpose

• Display informative messages to users.
• Notify users about successful operations, errors, warnings, or other important events.
• Enhance user experience by providing feedback in response to user actions.

Usage

To use the $alert component, call the $alert function with the desired parameters:

$alert(message, prompt, options);

Parameters

1. message (String): The text or HTML content to display in the alert.
2. prompt (String): Type of alert. Possible values are "success", "error", "primary", or "warning".
3. options (Object, optional): Additional customization options:
   - display (String): Duration for which the alert should be displayed (e.g., "5s").
   - placement (String): Position of the alert on the screen. Possible values: "top" or "bottom".
   - sleep (Boolean): If true, the alert will remain visible until manually closed.

Examples

Example 1: Displaying Different Types of Alerts

$alert("Operation successful!", "success");
$alert("An error occurred!", "error", { display: "5s" });
$alert("Welcome to our website!", "primary", { display: "5s" });
$alert("Warning: This action is irreversible!", "warning", { display: "7s" });

Example 2: Customizing Alert Placement

$alert("New message received!", "primary", { placement: "top" });

Example 3: Persistent Alert (sleep Option)

$alert("This alert will stay until manually closed", "warning", { sleep: false });

This keeps the alert visible until manually dismissed by the user.

Displaying HTML Content in Alerts

Example 1: Inline HTML Content

$alert("<h1>Welcome to our website!</h1>", "primary");

Example 2: Including an HTML Link

$alert("Operation successful! <a href='manage'>Account Manage</a>", "success");

• Displays a success alert containing an HTML anchor link.
• The link labeled "Account Manage" directs to the "manage" URL.

Events

The $alert component dispatches custom events, enabling developers to handle the alert's lifecycle:

• display: Fired when the alert is shown.
• close: Fired when the alert is closed.

Example: Listening to Alert Events

const myalert = $alert("Operation successful!", "success", { display: "3s" });

myalert.addEventListener("display", function() {
    console.log("Alert displayed!");
});

myalert.addEventListener("close", function() {
    console.log("Alert closed!");
});

Conclusion

The $alert component is a versatile tool for displaying alerts in web applications. Its customizable features and simple syntax make it easy to use while enhancing the user experience through clear and informative feedback.

---