Skip to content

MatthewAry/SnackBar

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SnackBar

A notification toast inspired by Google Material Design.

Getting Started

Installing Snackbar is as easy as...

bower install snackbar

or maybe you wish to use NPM...

npm install node-snackbar

and if that doesn't float you, you can always download the CSS and JS files...

<script type="text/javascript" src="dist/snackbar.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/snackbar.min.css" />

Examples

Checkout the Demo page.

Options

Key Type Default Description
text String Default Text The text to display inside the notification.
textColor String #ffffff The color of the text inside of the notification. Default color is white.
pos String bottom-left The location in the browser window where the notification will appear.
Options:
  • bottom-center
  • bottom-left
  • bottom-right
  • top-left
  • top-center
  • top-right
customClass String '' Add a custom class to the notification for custom styling.
width String auto The width of the notification. Learn more about the width property.
showActionButton Boolean true Adds or removes the action button.
actionText String Dismiss The action button's text.
actionTextColor String #4caf50 The action button's text color.
duration Number 5000 The time (in milliseconds) the notification is displayed before it's removed.
Set this value to 0 to make persistent.
onActionClick Function fadeOut Closes the notification by default. A function with the notification element as the argument

TODO

  • Make notifications stackable.

About

Google Material Design SnackBar Plugin

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 82.9%
  • CSS 17.1%