Nascent Plasticine Materialist

    angularjs-toast

    4.0.1 • Public • Published

    angularjs-toast NPM Version Tests Jsdelivr

    angularjs-toast is a simple service for creating toast notification for AngularJS pages

    Live demo here

    Getting Started

    Installation

    You can directly clone/download here

    git clone git@github.com:sibiraj-s/angularjs-toast.git

    or use cdn

    Minified:

    //cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.min.js
    //cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.min.css

    Pretty Printed:

    //cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.js
    //cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.css

    or

    Install via Package managers such as npm or yarn

    npm install angularjs-toast --save
    # or
    yarn add angularjs-toast

    Usage

    Import the modules required for angularjs-toast. It is necessary to include ngSanitize and ngAnimate for angularjs-toast to work

    <-- styles -->
    <link rel="stylesheet" href="../angularjs-toast.min.css" />
    
    <-- scripts -->
    <script src="angular/angular.min.js"></script>
    <script src="angular-sanitize/angular-sanitize.min.js"></script>
    <script src="angular-animate/angular-animate.min.js"></script>
    <script src="../angularjs-toast.min.js"></script>

    add angularjsToast dependency to the module

    const app = angular.module('myApp', ['angularjsToast']);

    and in your controller

    const toastController = toast => {
      toast.create('Hello World!');
    };
    
    toastController.$inject = ['toast'];
    app.controller('toastController', toastController);

    then in HTML

    <toast></toast>

    Options

    toast.create({
      timeout: 5 * 1000,
      message: 'Hi there!',
      className: 'alert-success',
      dismissible: true
    });
    Property Type Default Description
    className string alert-success accepted values are alert-(success/danger/primary/info)
    timeout number 5000 timeout for each toast messages to disappear
    message html-string or string Hi there! can be HTML or plain string
    dismissible boolean true show / hide the close icon.

    Configure globally

    const config = toastProvider => {
      toastProvider.configure({
        maxToast: 4,
        timeout: 5 * 1000,
        containerClass: 'toast-wrapper',
        defaultToastClass: 'alert-success',
        dismissible: true,
        insertFromTop: true,
        position: 'right'
      });
    };
    
    config.$inject = ['toastProvider'];
    app.config(config);
    Property Type Default Description
    maxToast number 7 maximum number of toast messages to show. if max reached the element inserted first will be removed
    timeout number 5000 timeout for each toast messages to disappear
    containerClass string " adds class to the container for more flexibility in styling
    defaultToastClass string " adds class to the container for more flexibility in styling
    dismissible boolean true show / hide the close icon.
    insertFromTop boolean false setting true will insert new messages on top else inserts at bottom
    position string right position of the element can be 'left', 'center' and 'right'

    Animations

    Default fadeIn-fadeOut animation can be overwriten

    .angularjs-toast {
      &.ng-enter {
        opacity: 0;
        transition: 0.5s ease-in;
    
        &.ng-enter-active {
          opacity: 1;
        }
      }
    
      &.ng-leave {
        opacity: 1;
        transition: 0.2s ease-in;
    
        &.ng-leave-active {
          opacity: 0;
        }
      }
    }

    Install

    npm i angularjs-toast

    DownloadsWeekly Downloads

    287

    Version

    4.0.1

    License

    MIT

    Unpacked Size

    45.1 kB

    Total Files

    11

    Last publish

    Collaborators

    • sibiraj-s