Author: | kvinbabbar |
---|---|
Views Total: | 1,330 views |
Official Page: | Go to website |
Last Update: | October 19, 2020 |
License: | MIT |
Preview:

Description:
A minimal yet configurable toast JavaScript library for creating toast-like notification boxes with slide and fade animations on the page.
Features:
- Supports HTML content.
- Configurable delay timeout.
- Custom close icon.
- Custom position.
- Shows the toast notification on page load or not.
How to use it:
1. Load the stylesheet toaster-box.css and JavaScript toaster-box.js in the HTML document.
<link rel="stylesheet" href="toaster-box.css" /> <script src="toaster-box.js"></script>
2. Display a basic toast notification on the page. The message supports both plain text and HTML content:
new ToasterBox({ msg: 'Toast Message Here' }); new ToasterBox({ msg: '<strong>Toast</strong> Message Here', html : true });
3. Determine the delay timeout in ms. By default, the toast notification will auto dismiss after 3 seconds.
new ToasterBox({ msg: 'Toast Message Here', duration: 5000 });
4. Determine whether to show the close button. Default: true.
new ToasterBox({ msg: 'Toast Message Here', closeButton: false });
5. Customize the close icon.
new ToasterBox({ msg: 'Toast Message Here', closeIcon: '<img src='./close.svg' alt='close icon' width='20' class='inverted'/>' });
6. Determine whether to show the toast notification on page load. Default: true.
new ToasterBox({ msg: 'Toast Message Here', autoOpen: false });
7. Determine the position of the toast notification: ‘top-left’, ‘top-center’, ‘top-right’, ‘bottom-left’, ‘bottom-center’, ‘bottom-right’.
new ToasterBox({ msg: 'Toast Message Here', position: 'bottom-center' });
8. Set the max width of the toast notification. Default: 450.
new ToasterBox({ msg: 'Toast Message Here', maxWidth: 350 });
9. Apply additional CSS class to the toast notification.
new ToasterBox({ msg: 'Toast Message Here', className: 'your classes here' });