Skip to content
This repository was archived by the owner on Nov 11, 2022. It is now read-only.

tameraydin/ngToast

Folders and files

NameName
Last commit message
Last commit date

Latest commit

744a2dc · Dec 9, 2017
Mar 13, 2016
Mar 13, 2016
Mar 13, 2016
Jun 17, 2014
Jun 17, 2014
Jan 20, 2015
Jun 17, 2014
Jul 25, 2014
Mar 7, 2016
Dec 9, 2017
Mar 13, 2016
Mar 13, 2016
Mar 13, 2016

Repository files navigation

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