Notification

Notifications are a handy JavaScript component for displaying messages to the. Notifications are highly customizable from both a CSS and JavaScript perspective.

• Example
• Position
• Content
• Timeout
• Methods
• Options
• HTML Initialization
• CSS Customization

Example

To display a notification, call the Notifications module with your options via the Container.

let notif = frontbx.Notification(
{
    text  : 'Hello! I\'m a notification.',
});

Position

Use the position option to set a notification in a desired position on the screen:

Available positions are: top-left top top-right left right bottom-left bottom top-right

let notif = frontbx.Notification(
{
    text  : 'Hello! I\'m a notification.',
});

Content

Notifications have a lot of versatility and provides a number of options for different use-cases. Use the provided options to add text and actions to a notification:

/* Standard */
frontbx.Notification({
    text  : 'Hello! I\'m a notification.',
});

/* Button */
frontbx.Notification(
{
    btn  : 'Dismiss',
    text : 'Hello! I\'m a notification.',
});

/* Icon */
frontbx.Notification(
{
    icon : 'bell',
    text : 'Hello! I\'m a notification.',
});

/* Button variant */
frontbx.Notification(
{
    btn        : 'Danger',
    btnVariant : 'danger',
    text       : 'Hello! I\'m a notification.',
});

/* Close button */
frontbx.Notification(
{
    icon : 'bell',
    text : 'Hello! I\'m a notification.',
    closebtn: true
});

/* Message variant */
frontbx.Notification(
{
    icon    : 'check',
    variant : 'primary',
    text    : 'Hello! I\'m a notification.',
});

/* Stacked message */
frontbx.Notification(
{
    icon       : 'bell',
    stacked    : true,
    btn        : '<button class="btn"></button>...',
    text       : '<p class="text-bold">...</p><p>...</p>',
});

/* Responsive message */
frontbx.Notification(
{
    responsive : true,
    btn        : 'Confirm',
    text       : '<p class="text-bold">Lorem ipsum laboris cupidatat in enim sunt?</p><p style="opacity: 0.9;">In proident nostrud exercitation elit irure id consequat consequat nulla sunt nulla dolore officia est.</p>',
});

/* Non-dense message */
frontbx.Notification(
{
    icon       : 'bell',
    dense      : false,
    text       : 'Eiusmod ullamco cupidatat culpa amet sit nostrud veniam consectetur quis labore duis duis ut occaecat sint.',
});

Timeout

Notifications auto-dismiss after 6 seconds by default. You can set a different timeout in milliseconds on the timeout option, or set it to false if you don't want it to auto-dismiss.

let notif1 = frontbx.Notification(
{
    text  : 'Hello! I\'m a notification.',
    timeout: false,
});

let notif2 =frontbx.Notification(
{
    text  : 'Hello! I\'m a notification.',
    timeout: 10000,
});

Methods

Once a Notification instance is created, there are a few methods to interact with it:

The remove method will animate and remove the notification:

notification.remove();

The domElement method returns the notification HTMLElement, which is wrapped in a positioning element:

notification.domElement();

The callbackValidate option when creating the notification allows you to run your own validation on whether the notification can be dismissed. Return true from this function to allow it or false if the user needs to take some sort of action:

let notif = frontbx.Notification(
{
    text  : 'Hello! I\'m a notification.',

    callbackValidate: (element) =>
    {
        if (someCondition) return true;

        return false;
    }
});

Options

The table below outlines the available options:

All callback functions receive the notification HTMLElement as their parameter.

HTML Initialization

For basic use-cases where access to the underlying JavaScript is not required, Notifications can be enabled through HTML markup via an anchor element with the .js-notification-trigger class.

All options can be set through data-attributes on the anchor element in hyphen-case. For example to set the btnVariant option, you would set the data-btn-variant="btn-primary" attribute.

<button type="button" class="btn js-notification-trigger" data-text="Hello, I'm a notification!">Trigger notification</button>

CSS Customization

Notifications use a combination of both local CSS and Sass variable on .notification-wrap with nested variables on .msg for enhanced component customization and styling.

For details on customizing message components, see the Message Documentation

Default values are set in the scss/_config.scss file in Frontbx's source.

scss/_config.scss

$notification-max-width: 450px !default;
$notification-shadow:    3 !default; // 1, 2, 3

.notification-wrap
{
    --fbx-notification-max-width: 450px;
}
.notification-wrap .msg
{
    box-shadow: ...;
}