Notification

Definition

A notification component is used to alert users with various statuses or messages. Notifications can provide feedback about user actions, inform about updates, or display error messages.

Notifications can appear as banners, toasts, or modal dialogs and are often color-coded to indicate the type of message, such as success, error, warning, or information.

• Alerts users with statuses or messages.
• Provides feedback, updates, or error messages.
• Can appear as banners, toasts, or modal dialogs.
• Color-coded to indicate message type (success, error, warning, information).

Example

{% load message %}

<div
    @notify.window="add($event)"
    x-data="{
        notifications: [],
        init() {
            this.notifications = {% django_messages_to_json messages %}
        },
        add(e) {
            this.notifications.push({
                'id': e.timeStamp,
                'type': e.detail.type,
                'message': e.detail.message
            });
            setTimeout(() => this.remove(e.timeStamp), 5000); // Auto-remove after 5 seconds
        },
        remove(id) {
            this.notifications = this.notifications.filter(i => i.id !== id);
        }
    }"
>
    <div class="position-fixed top-0 end-0 m-3" style="z-index: 1050;">
        <template x-for="notification in notifications" :key="notification.id">
            <div
                class="mb-3 p-3 rounded border bg-dark text-white shadow"
                :class="{
                    'border-success': notification.type === 'success',
                    'border-app-warning': notification.type === 'warning',
                    'border-app-danger': notification.type === 'error',
                    'border-app-primary': notification.type === 'info'
                }"
                style="max-width: 400px; pointer-events: auto;"
            >
                <div class="d-flex justify-content-between align-items-center">
                    <div x-text="notification.message"></div>
                    <button @click="remove(notification.id)" class="btn-close btn-close-white ms-3"></button>
                </div>
            </div>
        </template>
    </div>

    <div>
        <button @click="$dispatch('notify', { message: 'This is a success message!', type: 'success' })" class="btn btn-app-success">Show Success</button>
        <button @click="$dispatch('notify', { message: 'This is a warning message!', type: 'warning' })" class="btn btn-app-warning">Show Warning</button>
        <button @click="$dispatch('notify', { message: 'This is an error message!', type: 'error' })" class="btn btn-app-danger">Show Error</button>
        <button @click="$dispatch('notify', { message: 'This is an info message!', type: 'info' })" class="btn btn-app-primary">Show Info</button>
    </div>
</div>