Bs5-toast NPM | npm.io

bs5-toast

Bootstrap 5 toasts generator

https://bs5-toast.vercel.app

Features

Customizable content
Smooth animation
Typed safe

Installation

Install bs5-toast with npm

npm install bs5-toast

Install from cdn

<script src="https://unpkg.com/bs5-toast/dist/bs5-toast.js"></script>

Usage/Examples

import bs5 from 'bs5-toast'

new bs5.Toast({
    body: 'Hello world',
}).show()

or use directly in script tag

<script src="https://unpkg.com/bs5-toast/dist/bs5-toast.js"></script>
<script>
    new bs5.Toast({
        body: 'Hello world',
    }).show()
</script>

Options

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`

Methods

show

Reveals an element’s toast.

const toast = new bs5.Toast({
    body: 'Hello world',
})
toast.show()

hide

Hides an element’s toast.

toast.hide()

element

Get the toast element.

toast.element.addEventListener('shown.bs.toast', function () {
  console.log('toast shown!')
})
toast.show()

bootstrap5 bootstrap toast

@infinitebrahmanuniverse/nolb-bs5 @everything-registry/sub-chunk-1268 @zalastax/nolb-bs5

1.0.0

2 years ago