Author: | SkwalExe |
---|---|
Views Total: | 1,138 views |
Official Page: | Go to website |
Last Update: | August 20, 2022 |
License: | MIT |
Preview:

Description:
Toast notifications are becoming all the rage. They’re picked up by iOS, Android and Windows.
Toasteur.js is a toast notification library that gives you a unique way of displaying nice, customizable, info/warning/error/danger toast message boxes to your visitors. Inspired by CodeSeven’s Toastr plugin.
It’s also lightweight so it feels snappy when loading or losing focus on the page. Most importantly though, it’s easy to implement. No complicated configuration, no jQuery required!
How to use it:
1. Download and load the Toasteur.js plugin’s files in the document.
# Install & Download $ npm i toasteur
<link rel="stylesheet" href="dist/themes/toasteur-default.min.css" /> <script src="dist/toasteur.min.js"></script>
2. Initialize the Toasteur.js and determine at which position the toast notifications should stay.
- top-left
- top-right
- bottom-left
- bottom-right
- top-center
- bottom-center
let myToasteur = new Toasteur("top-right");
3. Set the time to wait before auto-dismissing the toast notifications.
let myToasteur = new Toasteur("top-right", 5000);
4. Create toast notifications on the screen.
// Success myToasteur.success('Toast Message', 'Toast Title', () => { // do something when clicked }) // Error myToasteur.error('Toast Message', 'Toast Title', () => { // do something when clicked }) // Info myToasteur.info('Toast Message', 'Toast Title', () => { // do something when clicked }) // Warning myToasteur.warn('Toast Message', 'Toast Title', () => { // do something when clicked })
Changelog:
v0.5.0 (08/20/2022)
- Allow custom html in toasts content
v0.4.0 (06/07/2022)
- New positions : top-center, bottom-center
v0.3.0 (05/30/2022)
- Allow to put notifications on top or bottom of the pile