Package Exports
- colored-snackbar
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (colored-snackbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
colored-snackbar
A super simple customizable angular snackbar module. Allows user to display custom colored snackbar in angular application.
Installation
Installing this module is pretty easy using npm:
npm install colored-snackbarThen just add the dependencies into HTML and inject the coloredSnackbar module into your angular application module:
In your HTML
<link rel="stylesheet" href="node_modules/colored-snackbar/css/colored-snackbar.css">
<script src="node_modules/colored-snackbar/js/colored-snackbar.js"></script>In your module.js
angular.module('myApp', ['coloredSnackbar']);Usage
Use the colored snackbar attribute directive in any of your clickable element in your HTML.:
<button type="button" colored-snackbar message="Colored Snack Bar"
back-color="black" font-color="yellow" snack-time="3000" position="top" ng-click="showSnackbar()">
Top Snackbar
</button>Customizable options:
<button type="button" colored-snackbar message="Colored Snack Bar"
back-color="black" font-color="yellow" snack-time="3000" position="bottom" ng-click="showSnackbar()">
Bottom Snackbar
</button>Options / Attributes
- message: [String] Message you want to display in snackbar.
- back-color: [String] Background color of snackbar, can be HEX value.
- font-color: [String] Font color of text in snackbar, can be HEX value.
- position: [String] Position where you want to display snackbar, two available i.e ‘top’ and ‘bottom’.
- snack-time: [Number] Display duration time of your snackbar. Default is 3 seconds.
- showSnackbar: [Function] To trigger colored snackbar, use it with ngClick.
License
MIT
