Snackbar Notification Component For jQuery - js-snackbar

Snackbar Notification Component For jQuery - js-snackbar

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();
});

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

  • Publication date: 28.06.2018
  • Source