Smooth Snackbar & Toast Notification In JavaScript – js-snackbar

Category: Javascript , Notification | April 2, 2019
Author: mickelsonmichael
Views Total: 888
Official Page: Go to website
Last Update: April 2, 2019
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:

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>

Create a basic snackbar/toast notification on the screen.

new Snackbar({
    message: "Message Here"
});

Decide whether to display a close icon in the notification.

new Snackbar({
    message: "Message Here",
    dismissible: true
});

Specify the timeout in milliseconds. Default: 5000ms.

new Snackbar({
    message: "Message Here",
    timeout: 3000
});

Change the notification type. All possible types:

  • success (default)
  • green
  • warning
  • alert
  • orange
  • danger
  • error
  • red
new Snackbar({
    message: "Message Here",
    status: "success"
});

Add custom actions:

new Snackbar({
    message: "Message Here",
    status: "success",
    actions: [{
      text: "Click Me!",
      function: function(){
        alert("A-C-T-I-O-N");
      }
    }]
});

Make the notification Sticky.

new Snackbar({
    message: "Message Here",
    status: "success",
    fixed: true
});

Changelog:

04/02/2019

  • Create “fixed” option

02/18/2019

  • Simply the search children function

You Might Be Interested In:


Leave a Reply