New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@codemotion/angular-toast

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@codemotion/angular-toast

Angular provider for toast notifications

2.0.0
latest
Source
npm

Version published: 7 years ago

Weekly downloads: 2; increased by100%

Maintainers: 1

Weekly downloads

Created: 7 years ago

Source

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

Keywords

FAQs

What is @codemotion/angular-toast?

Is @codemotion/angular-toast popular?

Is @codemotion/angular-toast well maintained?

Package last updated on 21 Sep 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install