A notification toast inspired by Google Material Design.
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" />
Checkout the Demo page.
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:
|
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 |
- Make notifications stackable.