Options

Notification Options

Note: These options are for versions before 5. For versions 5 and above, please see the readme file.

• life number of milliseconds that the notification will be visible (default: 10000)
• heading short heading for the notification
• icon string for the icon
  • Open the included demo file for an example of the included icons
• theme string for the theme (default: 'legacy')
  • Custom themes should be named .notific8-notification.family-[theme name] in your stylesheet - see note below about custom themes
• color string for the theme color (default: 'teal') (added in 3.2)
  • Custom theme colors should be named .notific8-notification.[color] in your stylesheet - see note below about custom themes
• sticky boolean for whether or not the notification should stick
  • If sticky is set to true, life will be ignored if it is also set
• horizontalEdge string value for top or bottom of the page (default: 'top')
  • only accepts values 'top' and 'bottom'
• verticalEdge string value for left or right of the page (default: 'right')
  • only accepts values 'left' and 'right'
• zindex integer value for the z-index (default: 1100)
  • this must be set before calling notific8 to create a notification via either config/configure or zindex
• closeText string for the text on the close button (default: 'close')
• namespace CSS namespace used for customization (default: 'namespace') (added in 2.2) It's rare that this should be changed. If it is set, make sure your Sass file is compiled with the proper namespace set.
• onInit function that takes one parameter containing the data that notific8 is initialized with
• onCreate function that takes two parameters, one containing a pointer to the notification object and one containing the notification's data
• onClose function that takes two parameters, one containing a pointer to the notification object and one containing the notification's data
• notificationName give the notification a specific name instead of a generated UUID (added in 4.1.0)
• queue puts the notifications into a queue, showing only one at a time (default: false) (added in 3.5.0)
• id adds the ability to use a custom ID for the notification (added in 4.4.0)

All of these settings are available to be configured. The configure function is used if you have specific settings such as theme and life that you want every notification to share. By configuring these settings, they become the new defaults and you don't have to type them for every notification. The configure function can be called multiple times.

Usage

// basic
notific8('My notification message goes here.');
// with a life set
notific8('My notification message has a life span.', { life: 5000 });
// with a heading
notific8('My notification has a heading line.', { heading: 'Notification Heading' });
// with an icon
notific8('My notification has an icon.', { icon: 'check-mark-2' });
// with a theme
notific8('My notification has a theme.', { theme: 'chicchat' });
// with a color
notific8('My notification has a color.', { color: 'amethyst' });
// make the notification sticky
notific8('My notification is sticky.', { sticky: true });
// change whether to notification is at the top or bottom
notific8('My notification is at the bottom.', { horizontalEdge: 'bottom' });
// change whether to notification is on the left or right
notific8('My notification is on the left.', { verticalEdge: 'left' });
// set the z-index
notific8('My notification has a z-index of 1500.', { zindex: 1500 });
// with custom close text
notific8('Custom close text.', { closeText: 'près' });
// with a notification name
notific8('This notification has a name.', { notificationName: 'custom-name' });
// configure queuing
notific8('configure', { queue: true } );
// add a custom id
notific8('This notification has a custom id.', { id: 'custom-id' });
// onInit event
notific8('onInit event example.', {
  onInit: function(data) {
    console.log('--onInit--');
    console.log('data:');
    console.log(data);
  }
}
// onCreate event
notific8('onCreate event example.', {
  onCreate: function(notification, data) {
    console.log('--onCreate--');
    console.log('notification:');
    console.log(notification);
    console.log('data:');
    console.log(data);
  }
}
// onClose event
notific8('onClose event example.', {
  onClose: function(notification, data) {
    console.log('--onClose--');
    console.log('notification:');
    console.log(notification);
    console.log('data:');
    console.log(data);
  }
}
// all options set
notific8('My notification with all options.', {
  life: 5000,
  heading: 'Notification Heading',
  icon: 'check-mark-2',
  theme: 'chicchat',
  color: 'amethyst',
  sticky: true,
  horizontalEdge: 'bottom',
  verticalEdge: 'left',
  zindex: 1500,
  closeText: 'près',
  notificationName: 'custom-name',
  id: 'custom-id',
  onInit: function(data) {
    console.log('--onInit--');
    console.log('data:');
    console.log(data);
  },
  onCreate: function(notification, data) {
    console.log('--onCreate--');
    console.log('notification:');
    console.log(notification);
    console.log('data:');
    console.log(data);
  },
  onClose: function(notification, data) {
    console.log('--onClose--');
    console.log('notification:');
    console.log(notification);
    console.log('data:');
    console.log(data);
  }
});

// set up your own default settings to save time and typing later
// NOTE this is not required
// NOTE the defaults for each theme family are assigned as properties of the height
notific8('configure', {
  life: 5000,
  theme: 'chicchat'
  color: 'ruby',
  icon: 'minus-circle',
  sticky: true,
  horizontalEdge: 'bottom',
  verticalEdge: 'left',
  zindex: 1500,
  closeText: 'près',
  notificationName: 'custom-name'
});

// set the zindex
notific8('zindex', 1500);

// destroy the plug-in's foot print (can be initialized by calling the plug-in again)
notific8('destroy');

// remove all visible notifications but leaves the plug-in's foot print
notific8('remove');

// remove one or more notifications by name from the queue (only works if notification queuing is enabled) notific8('removeFromQueue', 'single-notification'); notific8('removeFromQueue', [ 'notification1', 'notification2' ]);

Configuration Only Options

• queue Boolean for whether or not to queue notifications. This option is used when calling the config method and is ignored when passed as part of a notific8 call (default: false) (added in 3.5)

Before First Run Only

• onContainerCreate Event handler for the event triggered when a container is created (added in 3.6)

Usage

notific8('configure', {
  queue: true,
  onContainerCreate: function(container, options) {
    // ...
  }
});