Author: | mickelsonmichael |
---|---|
Views Total: | 769 views |
Official Page: | Go to website |
Last Update: | April 7, 2023 |
License: | MIT |
Preview:

Description:
js-snackbar is a pure JavaScript plugin that helps you create Material Design inspired non-blocking snackbars & toast notifications on the web app.
With smooth CSS animations and optional duration, status, message and much more.
See also:
How to use it:
1. Import the stylesheet js-snackbar.css
and JavaScript js-snackbar.js
into the document.
<link rel="stylesheet" href="css/js-snackbar.css"> <script src="js/js-snackbar.js"></script>
2. Create a basic snackbar/toast notification on the screen. HTML content is supproted.
new Snackbar({ message: "Message Here" });
3. Decide whether to display a close icon in the notification.
new Snackbar({ message: "Message Here", dismissible: true });
4. Specify the timeout in milliseconds. Default: 5000ms.
new Snackbar({ message: "Message Here", timeout: 3000 });
5. Change the notification type. All possible types:
- success (default)
- green
- warning
- alert
- orange
- danger
- error
- red
new Snackbar({ message: "Message Here", status: "success" });
6. Add custom actions:
new Snackbar({ message: "Message Here", status: "success", actions: [{ text: "Click Me!", function: function(){ alert("A-C-T-I-O-N"); } }] });
7. Make the notification Sticky.
new Snackbar({ message: "Message Here", status: "success", fixed: true });
8. Determine the position of the toast notification. Default: br (bottom right).
new Snackbar({ message: "Message Here", status: "success", position: "bl" // "br", "tr", "tc", "tm", "bc", "bm", "tl", or "bl" });
9. Set the width of the snackbar.
new Snackbar({ message: "Message Here", width: "80%" });
10. Add a custom icon to the status label: “exclamation”, “danger”, “warn”, “question”, “question-mark”, “info”, “add”, “plus”, or any single character.
new Snackbar({ message: "Message Here", icon: "danger" });
11. Customize the animation speed.
new Snackbar({ message: "Message Here", speed: 5000 });
Changelog:
v1.6.0 (04/07/2023)
- Improvements to icons
v1.5.1 (09/03/2022)
- Updated dependencies.
v1.5 (02/16/2021)
- SnackBars now have the ability to specify an “icon” to appear within the status label.
v1.4 (02/11/2021)
- The position property should now allow options for central positioning
- A new
speed
option allowing the user to define thetransition-duration
for the SnackBar
v1.3 (02/03/2021)
- Add ability to set width
- Allow timeout to be set to 0
- Fix bug where setting status to
null
would crash
02/03/2021
- Includes ability to define message as HTML
01/14/2021
- Allow snackbars to be in new positions
04/02/2019
- Create “fixed” option
02/18/2019
- Simply the search children function
Nice lib, but documentation horrible… Takes a while to get that it is a SnackBar, not a Snackbar. Thanks anyway for sharing