Author: | rfoel |
---|---|
Views Total: | 160 views |
Official Page: | Go to website |
Last Update: | August 23, 2023 |
License: | MIT |
Preview:

Description:
A JavaScript plugin for creating customizable toast notifications based on Bulma’s Notification component.
How to use it:
1. Install and import the bulma-toast.
# Yarn $ yarn add bulma-toast # NPM $ npm i bulma-toast
// ES Module import * as bulmaToast from 'bulma-toast'; // Browser <script src="https://unpkg.com/bulma-toast"></script>
2. Display a toast on the screen.
// ES Module toast({ message: 'Toast Message', }); // Browser bulmaToast.toast({ message: 'Toast Message', })
3. Set the notification type:
- is-primary
- is-link
- is-info
- is-success
- is-warning
- is-danger
- or custom CSS class
toast({ message: 'Toast Message', type: 'is-warning', })
4. Set the position of the toast notification.
- top-left
- top-center
- top-right (default)
- center
- bottom-left
- bottom-center
- bottom-right
toast({ message: 'Toast Message', position: 'top-center', })
5. Set the duration of the toast notification. Default: 2000ms.
toast({ message: 'Toast Message', duration: 5000, })
6. Add in/out animations to the notification. Requires Animate.css.
toast({ message: 'Toast Message', animate: { in: 'fadeIn', out: 'fadeOut' }, })
7. More options.
toast({ closeOnClick: true, opacity: 1, single: false, offsetTop: 0, offsetBottom: 0, offsetLeft: 0, offsetRight: 0, extraClasses: '', })
Changelog:
v2.4.3 (08/23/2023)
- Bugfixes