bootstrap-toasts-js

js
JS extension for bootstrap toasts
Version 1.1.4 License ISC
Keywords
bootstrapjstoasts
INSTALL
Type:
<script src=" https://cdn.jsdelivr.net/npm/bootstrap-toasts-js@1.1.4/dist/js/bootstrap-toasts-js.min.js "></script>
No default JS file set by the package author so the URL is guessed. You can always browse all package files to use another one.
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