ng-toast v2.0.0
ngToast
ngToast is a simple Angular provider for toast notifications.
Usage
bower install ngtoast --production # or npm install ng-toast --production
or manually download.
Include ngToast source files and dependencies (ngSanitize, Bootstrap CSS):
<link rel="stylesheet" href="bower/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="bower/ngtoast/dist/ngToast.min.css"> <script src="bower/angular-sanitize/angular-sanitize.min.js"></script> <script src="bower/ngtoast/dist/ngToast.min.js"></script>
Note: only the Alerts component is used as style base, so you don't have to include complete CSS
Include ngToast as a dependency in your application module:
var app = angular.module('myApp', ['ngToast']);
Place
toast
element into your HTML:<body> <toast></toast> ... </body>
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">
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.
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' }); }]);
Then in your CSS (example using animate.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