Author: | dmuy |
---|---|
Views Total: | 2,411 views |
Official Page: | Go to website |
Last Update: | December 28, 2019 |
License: | MIT |
Preview:

Description:
Yet another Google Material inspired toast & snackbar plugin written in Vanilla JavaScript.
Features:
- Customizable timeout.
- 4 types: info, error, success, warning.
- Custom action button for snackbar.
How to use it:
1. Download the plugin and include the following JavaScript & CSS files in the HTML file.
<link rel="stylesheet" href="mdtoast.min.css" /> <script src="mdtoast.min.js"></script>
2. Create toast notifications as follows:
mdtoast('This is an info toast.', { type: 'info' }); mdtoast('This is an error toast.', { type: 'error' }); mdtoast('This is a warning toast.', { type: 'warning' }); mdtoast('This is a success toast.', { type: 'success' });
3. Create a snackbar with an action button.
mdtoast('This is a snackbar.', { interaction: true, actionText: 'UNDO', action: function(){ this.hide(); } });
4. Sometimes you might need to show the toast & snackbar manually.
var instance = mdtoast('This is a snackbar.', { interaction: true, actionText: 'UNDO', action: function(){ this.hide(); }, init: true });
instance.show();
5. Override the default timeout (5000ms).
mdtoast('This is an info toast.', { type: 'info', duration: 10000 });
6. Enable/disable the modal mode. This means that you can not to toggle other toasts or snackbars until this toast (or snackback) is dismissed.
mdtoast('This is an info toast.', { type: 'info', duration: 10000, modal: true });