Creating Material Design Style Snackbars with JavaScript – SnackbarLight.js

Category: Javascript , Notification | December 31, 2015
Author: joostLawerman
Views Total: 4,317
Official Page: Go to website
Last Update: December 31, 2015
License: MIT

Preview:

Creating Material Design Style Snackbars with JavaScript – SnackbarLight.js

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: "#",

 

You Might Be Interested In:


Leave a Reply