bootstrap-toasts-js

Bootstrap Toasts

This library allows you create toasts by JavaScript.

Install

npm install bootstrap-toasts-js --save

CDN

• jsDelivr

<script src="https://cdn.jsdelivr.net/npm/bootstrap-toasts-js/dist/js/bootstrap-toasts-js.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap-toasts-js/dist/js/bootstrap-toasts-js.min.js"></script>

How to use it?

<script src="path/to/bootstrap-toasts-js.min.js"></script>

// Toast box
$('body').addToast({content: 'Hello world!', title: 'First Toast'});

// Toast confirm box
$('#example2').addConfirmToast({buttons: [{content: 'Yes', onClick: () => {alert('Thanks!!')}},{content: 'Definitely yes!', onClick: () => {alert('Thanks you so much!!')}, type: 'danger'}],content: 'Do you like bootstrap-toasts-js?', title: 'Question of life', type: 'success'});

Demo

https://kubax2000.github.io/bootstrap-toasts-js/

Parameter Description

Global

• autoDestroy: boolean (default: false) - Enable toast remove after displayTime
• autoHide: boolean (default: false) - Enable toast hide after displayTime
• closable: boolean (default: true) - Show close button
• closeAction: string (default: "destroy") ["destroy","hide"] - Is toast will have button to close
• content: string (required) - Content of toast
• closeAction: Date (default: new Date()) - Used to display time difference
• displayTime: number (default: 2000) - Time in milliseconds over which will be displayed toast
• elementId: string (default: "toast-" + currentId) - Id of toast box
• fadeOutAnimation boolean (default: true) - Show fade out animation
• fadeOutDelay: number (default: 500) - Time in milliseconds of fade out animation
• headerClasses: function (default: function) - Function returning header classes based on toast type; Used to select right header text color
• iconClass: string (default: null) - Class of span in header. Used to icons.
• iconImgSrc: string (default: null) - Path to image
• iconImgStyles: string (default: "height: 20px; width: 20px;") - Style of image icon
• lang: string (default: "en") - Language of add time
• onAutoClose: function (default: null) - Function called on auto close
• onClose: function (default: null) - Function called on close (cause by close button)
• onHide: function (default: null) - Function called on hide (auto close or close)
• progress: object - Close progressbar options
  • animated: bool (default: false) - Enable progress bar animation
  • bgColor: string (default: null) - Progress bar background color
  • show: bool (default: true) - Show progress bar
  • stripped: bool (default: false) - Enable stripped look of progress bar (bootstrap`s "progress-bar-striped")
  • type: string (default: "primary") ["success","warning","danger",...] - Type of progress bar
• show: boolean (default: true) - Show toast
• showTimeLabel: boolean (default: true) - Show add time label
• title: string (required) - Title of toast
• type: string (default: "default") ["success","warning","danger",...] - Type of toast

AddConfirmToast

• buttons: array - Array of options objects
  • content: string (required) - Content of button
  • default: boolean (default: true) - On click function is used on close
  • onClick: function (default: null) - Function called on click
  • type: string (default: "primary") ["success","warning","danger",...] - Type of button
• buttonsAlign: string (default: "right") - Align of buttons