mirror of https://github.com/ansible/ngToast synced 2026-04-05 19:22:28 +00:00

No description

JavaScript 59.6%
HTML 18.5%
SCSS 11%
Less 10.9%

Find a file

Michael Abashian 4550efb9cf Merge pull request #3 from mabashian/upgrade-angular Upgrade angular and angular-sanitize to 1.7.9		2020-06-16 09:57:40 -04:00
dist	make compatible with amd-named & commonjs bundlers	2016-07-31 20:23:22 -04:00
src	make compatible with amd-named & commonjs bundlers	2016-07-31 20:23:22 -04:00
test	introduced "newestOnTop" option. Closes #73	2016-03-13 13:40:47 +01:00
.editorconfig	first commit	2014-06-17 12:50:34 +02:00
.gitattributes	first commit	2014-06-17 12:50:34 +02:00
.gitignore	chore(version): update build to 1.3.1	2015-01-20 14:11:38 +00:00
.jshintrc	first commit	2014-06-17 12:50:34 +02:00
.travis.yml	added travis yml & build badge	2014-07-25 15:38:36 +02:00
bower.json	bump to version 2	2016-03-13 23:50:14 +01:00
Gruntfile.js	extracted banner process into a separate task	2016-03-07 17:25:21 +01:00
index.html	removed unnecessary flag on test html	2016-03-13 13:41:27 +01:00
index.js	make compatible with amd-named & commonjs bundlers	2016-07-31 20:23:22 -04:00
package.json	Bump version to 2.2.1	2020-06-16 09:56:54 -04:00
README.md	added npm link	2015-08-27 23:02:22 +02:00

README.md

ngToast

ngToast is a simple Angular provider for toast notifications.

Demo

Usage

Install via Bower or NPM:

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

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