@codemotion/angular-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

    Install

    npm i @codemotion/angular-toast

    DownloadsWeekly Downloads

    2

    Version

    2.0.0

    License

    MIT

    Last publish

    Collaborators

    • nikolay_543
    • dnoldstuff