colored-snackbar

A super simple customizable angular snackbar module. Allows user to display custom colored snackbar in angular application.

DEMO

Installation

Installing this module is pretty easy using npm:

npm install colored-snackbar

Then 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