Snackbar.js (Vanilla-Snackbar)
A simple implementation of a full width snackbar message using "vanilla js".
View exmple at http://chrisdimoulis.com/snackbar.js
Production Dependencies
None! (not even jquery)
Installation
Node
npm install --save vanilla-snackbar
Usage
Importing/Including
Node
Import vanilla-snackbar
into your module:
;
Style
See src/snackbar.scss
for default style and reference if you desire to override any styles.
Pre DOM ready
If you create a snackbar and create a message before the DOM is ready the message will be stored in a queue which which will execute once the DOM is ready.
Create Snackbar
// New snackbar with defaults var default_snack = ; // New snackbar with custom default time var short_snack = time: 2000; // New snackbar where the default behviour is to manually close var manual_snack = manual_close: true;
All options passed when creating the snackbar object are default. Overrides can be passed in each call to display a message.
Available Options
manual_close
: Boolean. Provide a close X button (true) vs timed close (false). Default: falsetime
: ms of time before automatic close. (ignored ifmanual_close: true
). Default: 5000class
: String containing desired classes to add to snackbar. Default: empty
NOTE: Default Options and Multiple Snackbar Objects
A new Snackbar object will not inject new #snackbar-wrapper
elements. All Snackbar objects use the same wrapper. It simply creates a new object with a different set of default options for displaying a Snackbar message. See below for overriding default options on a message specific basis as opposed to creating multiple Snackbar objects.
Displaying Messages
Displaying a message is as simple as calling the .message(msg, opts)
function of the Snackbar. There are also four helper methods for common Snackbar usage. All of these functions take 2 parameters:
msg
: the message to be displayed.opts
: the options to override default options.
// Display a message snack; // Helper functions: // Display a message that must be removed manually -> snack; // Display a message with a green background (adds class 'success') -> snack; // Display a message with a red background (adds class 'error') -> snack; // Display a message with a orangish/yellow background (adds class 'warn') -> snack;
Creating a Snackbar message will return a Promise object. This promise object will resolve when the Snackbar has finished fading in.
Overriding Default Options
// New snackbar with defaults var snack = ; // Require user to close message just this one time snack // New snackbar with custom default time var snack = time: 2000; // Make this message stick longer than default snack time: 7500); // Add your own classes to the snackbar snack