Smooth Snackbar & Toast Notification In JavaScript – js-snackbar

Category: Javascript , Notification | February 16, 2021
Author: mickelsonmichael
Views Total: 128 views
Official Page: Go to website
Last Update: February 16, 2021
License: MIT

Preview:

Smooth Snackbar & Toast Notification In JavaScript – js-snackbar

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.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 the transition-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

You Might Be Interested In:


Leave a Reply