❤
npm
Sign UpSign In

ng-toast

2.0.0 • Public • Published

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.

  1. 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

  1. Include ngToast as a dependency in your application module:
var app = angular.module('myApp', ['ngToast']);
  1. Place toast element into your HTML:
<body>
  <toast></toast>
  ...
</body>
  1. 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'
  });
}]);
  1. 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

Readme

Keywords

Package Sidebar

Install

npm i ng-toast

Repository

github.com/tameraydin/ngToast

Homepage

tameraydin.github.io/ngToast

Weekly Downloads

3,208

Version

2.0.0

License

MIT

Last publish

Collaborators

  • tameraydin
Try on RunKit
Report malware