Snackbar

Notifications inspired by Google Material Design

Download

Lets see what it does...

Here are basic examples of Snackbar in action.

                  
                  Snackbar.show({pos: 'bottom-left'}); //Set the position

Action Button


                  Snackbar.show({
                    showAction: false,
                    });


                    Snackbar.show({
                      actionText: 'Thanks!',
                      });


                      Snackbar.show({
                        actionTextColor: '#ff0000',
                        });

                  Snackbar.show({
                           text: 'I have a custom callback when action button is clicked.',
                           width: '475px',
                           onActionClick: function(element) {
                                 //Set opacity of element to 0 to close Snackbar 
                                 $(element).css('opacity', 0);
                                 alert('Clicked Called!');
                             }
                          });

Download & Install

Option 1 - Bower install:

                    $ bower install snackbar

Options 2 - NPM Install:

                    $ npm install node-snackbar

Option 3 - Download CSS and Javascript Files:

Download Files

1. Reference the Snackbar javascript and CSS files:

2. Call the show() function on the Snackbar object when you wish to display a notification.

                  $('.button').click(function() {
                           Snackbar.show({text: 'Example notification text.'});
                        });

configuration

Configuration options used to customize each notification.

Key	Default	Description
text	null	The text to displae inside the notification.
textColor	#FFFFFF	Text color of the notification text. Default is white.
pos	bottom-left	The position the notification will show. Refer to the examples above for possible positions.
customClass	null	Add a custom class to the notification for custom styling.
width	auto	Width of the notification. Used to shrink/expand window as you wish.
showAction	true	Boolean to show the action buton or not.
actionText	Dismiss	Text to display as the action button.
actionTextAria	Dismiss, Description for Screen Readers	Text for screen readers.
alertScreenReader	false	Determines if screen readers will annouce the snackbar message.
actionTextColor	#4CAF50	Text color of the action button.
backgroundColor	#323232	Background color of the notification window.
duration	5000	Time in milliseconds the notification is displayed before fading out.
onActionClick	function(ele)	Default action closes the notification.
onClose	function(ele)	Fires when the notification has been closed.