ng-toast

Angular provider for toast notifications

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ng-toast
330132.0.07 years ago7 years agoMinified + gzip package size for ng-toast in KB

Readme

ngToast Code Climate Build Status
ngToast is a simple Angular provider for toast notifications.
Demo

Usage

  1. Install via Bower or NPM:
```bash bower install ngtoast --production # or npm install ng-toast --production ``` or manually download
.
  1. Include ngToast source files and dependencies (ngSanitize, Bootstrap CSS):
```html
``` Note: only the Alerts component is used as style base, so you don't have to include complete CSS
  1. Include ngToast as a dependency in your application module:
```javascript var app = angular.module('myApp', 'ngToast'
); ```
  1. Place toast element into your HTML:
```html
<toast></toast>
...
```
  1. Inject ngToast provider in your controller:
```javascript app.controller('myCtrl', function(ngToast) {
ngToast.create('a toast message...');
}); // for more info: http://tameraydin.github.io/ngToast/#api ```

Animations

ngToast comes with optional animations. In order to enable animations in ngToast, you need to include ngAnimate module into your app:
<script src="bower/angular-animate/angular-animate.min.js"></script>

Built-in 1. Include the ngToast animation stylesheet:
```html ```
2. Set the animation option. ```javascript app.config('ngToastProvider', function(ngToastProvider) {
ngToastProvider.configure({
  animation: 'slide' // or 'fade'
});
}
); `` Built-in ngToast animations include slide & fade`.
Custom
See the plunker using animate.css.
1. Using the additionalClasses option and ngAnimate you can easily add your own animations or wire up 3rd party css animations. ```javascript app.config('ngToastProvider', function(ngToastProvider) {
ngToastProvider.configure({
  additionalClasses: 'my-animation'
});
}
); ```
2. Then in your CSS (example using animate.css): ```css / Add any vendor prefixes you need / .my-animation.ng-enter {
animation: flipInY 1s;
}
.my-animation.ng-leave {
animation: flipOutY 1s;
} ```

Settings & API

Please find at the project website.

Development

  • Clone the repo or download
  • Install dependencies: `npm install && bower install
  • Run grunt watch`, play on /src
  • Build: `grunt`

License

MIT http://tameraydin.mit-license.org/

Maintainers

TODO

  • Add more unit & e2e tests