$ bower install ng-foobar --save
- Include both ng-foobar.js and ng-foobar.css in your website.
<script src="bower_components/ng-foobar/ng-foobar.js"></script>
<link rel="stylesheet" href="bower_components/ng-foobar/ng-foobar.css">
- Set ngFoobar as a dependency in your module
var app = angular.module('myApp', ['ngFoobar']);
- Inject ngFoobar provider in controller
var MyCtrl = function($scope, $timeout, ngFoobar) {}
Use with the API down below.
- show(context, message) - Display message in the screen
- context -
[string]
"success"'
,"error"
,"warning"
or"info"
- message -
[string]
The message to be displayed
ngFoobar.show("success", "Hi, I'm a successful notification message");
- setAutoClose(autoClose, displayTime) - Enable/disable notification auto close
- autoClose -
[boolean]
Whether to auto close the notifications or not (default value isfalse
) - displayTime -
[number]
The display duration in milliseconds (default value is3000
)
ngFoobar.setAutoClose(true, 5);
- setColors(context, colors) - Change the colors of a specific context
- context -
[string]
"success"'
,"error"
,"warning"
or"info"
- colors -
[object]
color
,background
andborder
- new color values
ngFoobar.setColors("success", {color: "#3C763D", background: "#DFF0D8", border: "#D6E9C6"});
- resetColors() - Resets all colors for all contexts to their default values
ngFoobar.resetColors();
- setOpacity(opacity) - change the opacity to the specified value
- opacity -
[number]
The desired opacity value for the notification bar (default is0.9
)
ngFoobar.setOpacity(0.8);
A working demo can be found at http://ng-foobar.herokuapp.com/
MIT