# Notification

Show a short message to user that automatically closes after a while

# Basic usage

Notification in Atlas library is provided as a plugin, which gives you more freedom to use it and set the defaults yourself.

First, import it in your main.js file with

import bdnNotification from './bdn-library/components/bdnNotification'

Then, make it globaly available as a plugin with the following:

Vue.use(bdnNotification)

Here you can pass the default options for all notifications in your app (note that these options can be overridden if you use the same option when calling the notification later). Below are all options, and their defaults that can be set in notification, you can find explanation for each at the end of this document.

Vue.use(bdnNotification, {
  position: 'top-right',
  title: '',
  message: '',
  type: '',
  duration: 5000,
  progress: false,
  onHide: null,
  onShow: null,
  onClose: null,
  component: null,
  customIcon: null,
  customClass: '',
  showClose: true,
  hoverPause: true,
  id: ''
})

After this, two global prototypes will be available for notifications: $notification and $notificationClearAll.

When showing a notification, you need to at least provide a message property, all other properties are optional.

Check out the basic example below:

# Position

Notifications can be show in either corner of the screen. You can set this as a global setting when importing the component, or you can set it for each notification individually. The default position is top-right.

# Duration

The default notification duration is 5s. You can change this in the default options when importing notification component, or when showing a notification.

To disable the automatic notification hiding, you can set duration option to 0 or null.

By default, progress bar is not enabled, so if you want a timer bar that shows how long until a notification is closed you can set the option progress: true.

Also, for notifications that have duration, countdown timer will be paused when you hover with your cursor over it, and restarted once the cursor leaves the notification. You can disable this behaviour by setting the property hoverPause to false when calling the notification.

# Types

There are 4 pre-made notification types: info, success, warning, danger. Use them in context of the information presented to the user.

# Customization

If you need to customize the notification, you can either use a separate component (check the section below) or pass your own classes in customClass property. As notifications are appended to the body of the page, this class needs to be global in order to work.

If you wish to use your own icons in notifications, instead of the predefined ones for types, you can pass the icon class in customIcon property.

Notifications are using the following scss variables, shown with their defaults below. You can use them to globally change the styles of notifications.

$notification-shadow: 0 0 10px -3px rgba(32, 85, 115, 0.25) !default;
$notification-border: #e0e1e3 !default;
$notification-radius: $default-radius !default;
$notification-background: $base !default;
$notification-type-info-color: $primary !default;
$notification-type-warning-color: $warning !default;
$notification-type-danger-color: $danger !default;
$notification-type-success-color: $success !default;
$notification-progress-bg: $plain !default;

# Custom component

For full customization of the notification, you can leverage a component property when calling a notification.

Simply pass a component name in the component property (you need to register it globally before that). Your component will then be shown in a container that is positioned according to the settings.

All notification options, including title, message, duration etc will be available in your component in message prop.

To close a notification that is using a custom component, simply emit close event from your component.

# Notification events

Each notification has 3 events you can use to perform different actions: onShow, onHide and onClose. These look like all other options when you call a notification, but they will accept only functions.

onShow - fired when a notification is shown

onHide - fired when a notification is hidden, whether it's hidden because the duration has passed or user clicked the close button.

onClose - fired only when a user clicks the close button.

Note

A proper way to pass a function to any of these hooks is with arrow function, something like this onClose: () => this.showUserClosed().

If you would bind it like this onClose: this.showUserClosed() this function would be executed immediately when this object is passed to a notification constructor.

Notifications shown: 0

Notifications hidden: 0

# Options

Property	Type	Default	Accepts	Description
`position`	String	`top-right`	`top-right`, `top-left`, `bottom-right`, `bottom-left`	The position of notification in regard to the viewport
`title`	String	empty	Any string	The title for notification message
`message`	String	empty	Any string	The main text message in notification
`type`	String	empty	`info`, `success`, `warning`, `danger`	The context of notification, which will show the proper coloring and an predefined icon
`duration`	Number	5000	Number or null	A duration of the notification message in milliseconds.
`progress`	Boolean	false	`true` or `false`	Determines if progress bar showing the remaining time of the notification is shown
`component`	String	empty	Name of globally imported component	Custom component to be used instead of the predefined one
`customIcon`	String	empty	Any string	Custom icon class that you can use instead of the predefined icons
`customClass`	String	empty	Any string	Custom class that will be added to the notification
`showClose`	Boolean	`true`	`true` or `false`	Determines if the close button should be shown. Please don't hide the close button and set the duration to 0 at the same time, as there would be no way to close that notification
`hoverPause`	Boolean	`true`	`true` or `false`	Determines if timer should stop when users move their cursor over a notification
`id`	String	Generated ID	Any string without space	Id attribute for message
`onShow`	Function	null	A method from your components or mixins	A function to be triggered when a notification is shown
`onHide`	Function	null	A method from your components or mixins	A function to be triggered when a notification is hidden automatically or when a user clicks the close button
`onClose`	Function	null	A method from your components or mixins	A function to be triggered when a user clicks the close button on notification

← Modal Select →