Notification

BsNotification is a lightweight push notification component that display a notification message to user.

Overview

BsNotification is designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. BsNotification are intended to be small interruptions to visitors or users, and therefore should contain minimal, to-the-point, non-interactive content.

Updated on v2.0.0

INFO

• The component is opt-in for performance reasons and must be initialized first.
• The component is a singleton instance and therefore only one <bs-notification> tag is allowed on a page. The $notification instance can then be called within the page scope.
• To enable a $notification instance at application scope, place <bs-notification> tag in the main Vue file, e.g.: App.vue.

Variants

BsNotification provides five variants and can be easily called using $notification instance.

Display Placement

The notifications can be displayed on four sides of the page.

With ProgressBar

The notifications also has progress bar that can be displayed when needed.

Hiding Icons

There are cases when the notification icon is not needed. You can hide the icon using the iconOff property via its configuration option when creating new notification.

Added since v2.1.3

CSS Variables

Updated on v2.1.3

--md-notification-background-color: #16181b;
--md-notification-border-radius: 0.375rem;
--md-notification-box-shadow-color: rgba(0, 0, 0, 0.2);
--md-notification-box-shadow-hover-color: rgba(0, 0, 0, 0.45);
--md-notification-color: #fff;
--md-notification-font-size: .9rem;
--md-notification-hover-color: #dee2e6;
--md-notification-opacity: 0.9;
--md-notification-title-weight: 500;
--md-notification-title-size: 110%;
--md-notification-padding-x: 1rem;
--md-notification-padding-y: 0.75rem;
--md-notification-progressbar-color: #ffbb33;
--md-notification-spacing: 0.75rem;
--md-notification-width: 350px;

API Reference

The $notification instance has methods as described below:

Method	Description
add( data:String/TNotificationOption):TNotificationOption	Create and display new notification. Parameters: data, The notification message or configuration option.
error( data:String/TNotificationOption, title?:String):TNotificationOption	Shortcut method to create and display ERROR notification. Parameters: data, The notification message or configuration option. title, The notification title (optional).
info( data:String/TNotificationOption, title?:String):TNotificationOption	Shortcut method to create and display INFO notification. Parameters: data, The notification message or configuration option. title, The notification title (optional).
success( data:String/TNotificationOption, title?:String):TNotificationOption	Shortcut method to create and display SUCCESS notification. Parameters: data, The notification message or configuration option. title, The notification title (optional).
warning( data:String/TNotificationOption, title?:String):TNotificationOption	Shortcut method to create and display WARNING notification. Parameters: data, The notification message or configuration option. title, The notification title (optional).
clearAll():void	Close all notifications and remove from the DOM.
close( item:TNotificationOption):void	Alias for remove method.
remove( item:TNotificationOption):void	Close and remove a notification from the DOM.
removeByType( variant:TNotificationVariant):void	Close and remove notification by its variant. Valid variants are: default, success, info, warning, danger, custom.

The TNotificationOption data object has properties as described below:

Property	Type	Description
clickClose	Boolean	Enable closing the notification when clicked.
closeButton	Boolean	Display close button.
iconOff	Boolean	Enable hiding the notification icon. v2.1.3
message required	String	The notification message.
position	TNotificationPosition	Set the notification display placement. Valid values are: top-right,top-left,top-center,top-full-width,bottom-right,bottom-left,bottom-center,bottom-full-width.
preventDuplicates	Boolean	Prevent duplicate notifications.
progressBar	Boolean	Display progress bar or not.
timeout	Number	Notification display duration, in milliseconds.
title	String	The notification title.
variant	TNotificationVariant	The notification variant. Valid values are: default, success, info, warning, danger, custom.