deawx / bootstrap-4-advanced-toast Goto Github PK

View Code? Open in Web Editor NEW

A Light weight Bootstrap 4 Toast Notification plugin built with jQuery.

License: GNU General Public License v3.0

CSS 0.08% HTML 1.46% JavaScript 95.75% TypeScript 2.71%

bootstrap-4-advanced-toast's Introduction

Bootstrap Advanced Toast by Rajendra

Toast Examples

Installation

Add the css and js file into the HTML file located as below.

css : /css/bs4Toast.css
js : /js/bs4-toast.js

Usage

bs4Toast.show( 'Toast Header', 'Toast Content', options);
bs4Toast.show('Toast with Button', 'This is toast with buttons example.', 
  {
    delay : 2000,
    headerClasses : [],
    bodyClasses : [],
    buttons: [
    {
      text : 'Button 1',
      class : 'btn btn-success btn-sm mr-2',
      callback : () => {
        alert('Button 1 clicked');
      }
    },
    {
      text : 'Button 2',
      class : 'btn btn-primary btn-sm',
      callback : () => {
        alert('Button 2 clicked');
      }
    }
    ],  
    icon : {
      type : 'fontawesome', // image or fontawesome
      src : 'https://via.placeholder.com/150', // src for image
      class : 'fa-bell' // class for image
    }

  }

Methods

show : bs4Toast.show( 'Toast Header', 'Toast Content', options);
primary : bs4Toast.primary( 'Toast Header', 'Toast Content', options);
error : bs4Toast.error( 'Toast Header', 'Toast Content', options);
warning : bs4Toast.warning( 'Toast Header', 'Toast Content', options);

options object should follow the key and value.

Params Key	DataType
delay	Default : 2 secs, Fade out in Milli Seconds in int
headerClasses	Array, if you want to add some custom classes in header DOM.
bodyClasses	Array, if you want to add some custom classes in body DOM.
buttons	Array Object, each object should have text, class and callback method.
icon	Object, inside object thier should type with value image or fontawesone, if type is image then image url should be given in src key and for fontawesome class should be given.

Recommend Projects