@erwinstone/bs-toast

v1.0.1

Bootstrap toasts generator

Features

Install with npm:

npm install @erwinstone/bs-toast

Install from cdn:

Place js before </body> tag:

<body>
	...
	<script src="https://unpkg.com/@erwinstone/bs-toast@1.0.1/dist/bs-toast.min.js"></script>
</body>

* You can also use bs-toast as javascript module:

<script src="yourscript.js" type="module"></script>

In yourscript.js file, import BsTag (Change location according to your path):

import BsTag from './path/to/bs-toast.module.js'

Or you can use it directly in the html script as a module:

<script type="module">
	import BsTag from './path/to/bs-toast.module.js'
</script>

Toasts are as flexible as you need. You can put any html tag in toast header or body.

Name	Type	Default	Description
`body`	string		Body content. Can also be filled with html tags. example: `Hello <b>World</b>`
`header`	string		Header content. Can also be filled with html tags. example: `<h6 class="mb-0">Success</h6>`
`animation`	boolean	`true`	Apply transition to the toast
`autohide`	boolean	`true`	Auto hide the toast
`btnClose`	boolean	`true`	Show close button
`btnCloseWhite`	boolean	`false`	Set close button as white variant
`className`	string		Class attribute to be added in class ‘.toast’
`delay`	number	5000	Delay hiding the toast (ms)
`gap`	number	16	Gap between toasts (px)
`margin`	string	`1rem`	Margin of corner. Can also be filled with a css variable. example: `var(--toast-margin)`
`placement`	string	`top-right`	Corner position of toast. Available values: `top-right, top-left, bottom-right, bottom-left`

Name	Returns	Example	Description
`show`	`void`	`toast.show()`	Reveals an element’s toast
`hide`	`void`	`toast.hide()`	Hides an element’s toast
`element`	`HTMLDivElement`	`toast.element`	Get the toast element