Snackbar Notification Component For jQuery - js-snackbar

Snackbar Notification Component For jQuery - js-snackbar
File Size: 5.05 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

js-snackbar is a really small JavaScript (jQuery) plugin which provides an easy way to create Android & Material Design snackbar notifications with custom action support.

See also:

How to use it:

1. Load the Material Icon library for the snackbar icons.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. Load jQuery JavaScript library and the js-snackbar's files in the html document.

<link rel="stylesheet" href="css/snackbar.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="js/snackbar.js"></script>

3. Create the snackbar tag on the page.

<snackbar></snackbar>

4. Create a normal snackbar that automatically dismiss after 5 seconds.

const snackbar  = new SnackBar;

snackbar.make("message",[

  // message
  "Unable to connect the server",

  // action text
  null,

  // vertical position
  "bottom",

  // horizontal position
  "center"
  
], 5000);

5. Create a action snackbar that listening for the action and do something when you click the action button.

const snackbar  = new SnackBar;
snackbar.make("action",[

  // message
  "Unable to connect the server",

  // action button
  "retry",

  // vertical position
  "bottom",

  // horizontal position
  "center"

], null);

snackbar.action(function(state){
  //alerting the state for testing purposes
  if(state){
    alert("true");
  }
  snackbar.close();
});

Changelog:

2018-07-12

  • ability to change the colors and remove the use of Google Icons

This awesome jQuery plugin is developed by Kascique. For more Advanced Usages, please check the demo page or visit the official website.