ngToast is a simple Angular provider for toast notifications.
bower install ngtoast --production
# or
npm install ng-toast --productionor 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
toastelement 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/#apingToast 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
- Include the ngToast animation stylesheet:
<link rel="stylesheet" href="bower/ngtoast/dist/ngToast-animations.min.css">- Set the
animationoption.
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
additionalClassesoption 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;
}Please find at the project website.
- Clone the repo or download
- Install dependencies:
npm install && bower install - Run
grunt watch, play on /src - Build:
grunt
MIT http://tameraydin.mit-license.org/
- Add more unit & e2e tests
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent