Creating Material Design Style Snackbars with JavaScript – SnackbarLight.js

Preview:

Description:

SnackbarLight.js is a lightweight and standalone JavaScript library used for displaying Google Material Design inspired snackbars at the bottom of the screen.

Basic usage:

To get started, you need to include the stylesheet snackbarlight.css and JavaScript file snackbarlight.js in your html page.

<link href="dist/snackbarlight.css" rel="stylesheet">
<script src="dist/snackbarlight.js"></script>

Create a new snackbar on your screen.

new Snackbar("Hello World");

Toggle the snackbar with a trigger button using HTML5 data attributes.

<span data-toggle=snackbar data-content="Hello World">Click me</span>

There’re several configuration options which you can pass to the snackbars via JavaScript or HTML5 data attributes.

// How long it takes for the snackbar to disappear
timeout: 5000,
// Wich class is used to tell that the snackbar is active
activeClass: "active",
// Name of the link or action if specified
link: false,
// If not used clicking will activate the callback or do nothing
url: "#",