Skip to content

kubax2000/bootstrap-toasts-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

JS extension for bootstrap toasts

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published