mi-notification

The <mi-notification> element can be used to display a notification.

Working example:

Example usage:

<!-- HTML -->

<mi-notification position="bottom-right" duration="6"></mi-notification>
<button onclick="showNotification('Message to display', 'info', false)">Show notification</button>
// JavaScript

const miNotificationElement = document.querySelector('mi-notification');

function showNotification(message, notificationType, isSticky) {
    miNotificationElement.push(message, notificationType, isSticky);
}

position attribute

A position attribute is available on the <mi-notification> element, which can be used to set the position of where the notifications should be rendered. Default value is 'bottom-right'.

Supported positions
top-left
top-center
top-right
bottom-center
bottom-left
bottom-right

duration attribute

A duration attribute is available on the <mi-notification> element, which can be used to control how many seconds the notifications should be visible before automatically dismissed. Default value is 3 seconds.

push method

A push method can be called on the <mi-notification> element to show a notification.

The method accepts three arguments:

clearAll method

A clearAll method can be called on the <mi-notification> element to clear all visible notifications.

Properties

Property Attribute Description Type Default
duration duration Time the notification should be visible. Default value is 3. number 3
position position Where the notifications should be positioned. NotificationPosition.BOTTOM_CENTER or NotificationPosition.BOTTOM_LEFT or NotificationPosition.BOTTOM_RIGHT or NotificationPosition.TOP_CENTER or NotificationPosition.TOP_LEFT or NotificationPosition.TOP_RIGHT NotificationPosition.BOTTOM_RIGHT

Methods

clearAll() => Promise<void>

Clear all notifications.

Returns

Type: Promise<void>

push(message: string, type?: string, sticky?: boolean) => Promise<void>

Show a notification.

Returns

Type: Promise<void>