NS-Lib

Usage

To set up toast notifications, first run the Toasts.Setup function to enable toasts on your page.

NSLib.Toasts.Setup();

Next, create a toast using the Toasts.Show function. It takes five arguments:

• Color: A Bootstrap color name, used to color the toast header. Acceptable values would be primary, secondary, success, info, warning, danger, light, and dark
• Icon: A Bootstrap icon name (without the bi- prefix). Example: exclamation-triangle
• Title: The title of the toast notification
• Body: Body text of the toast notification. You can use HTML for formatting.
• Timeout: The number of milliseconds for which the toast should stay onscreen

NSLib.Toasts.Show(
    "secondary", /* Bootstrap color */
    "bell", /* Bootstrap icon */
    "Toast title text",
    "Toast body text",
    3000 /* Timeout */
);

Positioning

By default, toasts will be aligned to the top right corner of the screen. You can change this when running the Toasts.Setup function by passing two booleans. The first boolean will align the toasts to the top of the screen if true or the bottom of the screen if false, and the second boolean will align toasts to the right side of the screen if true or to the left side of the screen if false.

// Align top right - the default
NSLib.Toasts.Setup(true, true);

// Align top left
NSLib.Toasts.Setup(true, false);

Try it out:

Top left Top right Bottom left Bottom right

Prompts

You can also use toasts for a yes/no prompt.

NSLib.Toasts.ShowPrompt(
    'secondary',
    'bell',
    'Hello world',
    'This is an example prompt notification',
    function() { alert('You clicked yes!'); }, /* Function to run when yes is clicked */
    function() { alert('You clicked no!'); }, /* Function to run when no is clicked */
    'danger', /* Color of the yes button */
    'outline-dark' /* Color of the no button */
);

Try it out