@codemotion/angular-toast

Angular provider for toast notifications

Stats

StarsIssuesVersionUpdatedCreatedSize
@codemotion/angular-toast
2.0.04 years ago4 years agoMinified + gzip package size for @codemotion/angular-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:

    bower install ngtoast --production
    # or
    npm install ng-toast --production
    

    or manually download.

  2. Include ngToast source files and dependencies (ngSanitize, Bootstrap CSS): ```html

 *Note: only the [Alerts](http://getbootstrap.com/components/#alerts) component is used as style base, so you don't have to include complete CSS*

3. Include ngToast as a dependency in your application module:
```javascript
var app = angular.module('myApp', ['ngToast']);
  1. Place toast element into your HTML:

    <body>
     <toast></toast>
     ...
    </body>
    
  2. Inject ngToast provider in your controller:

    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:
<link rel="stylesheet" href="bower/ngtoast/dist/ngToast-animations.min.css">
  1. Set the animation option.
    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.

    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](http://tameraydin.github.io/ngToast/#api).

## Development

* Clone the repo or [download](https://github.com/tameraydin/ngToast/archive/master.zip)
* Install dependencies: ``npm install && bower install``
* Run ``grunt watch``, play on **/src**
* Build: ``grunt``

## License

MIT [http://tameraydin.mit-license.org/](http://tameraydin.mit-license.org/)

## Maintainers

- [Tamer Aydin](http://tamerayd.in)
- [Levi Thomason](http://www.levithomason.com)

## TODO
- Add more unit & e2e tests

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.