angularjs-toast

WebJar for angularjs-toast

License	MIT
Categories	JavaScript Languages Angular User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	angularjs-toast
Last Version	4.0.0
Release Date	Jan 14, 2020
Type	jar
Description	angularjs-toast WebJar for angularjs-toast
Project URL	http://webjars.org
Source Code Management	https://github.com/sibiraj-s/angularjs-toast

Download angularjs-toast

Filename	Size
angularjs-toast-4.0.0.pom
angularjs-toast-4.0.0.jar	19 KB
angularjs-toast-4.0.0-sources.jar	22 bytes
angularjs-toast-4.0.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/angularjs-toast/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>angularjs-toast</artifactId>
    <version>4.0.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/angularjs-toast/
implementation 'org.webjars.npm:angularjs-toast:4.0.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/angularjs-toast/
implementation ("org.webjars.npm:angularjs-toast:4.0.0")

Apache Buildr

'org.webjars.npm:angularjs-toast:jar:4.0.0'

Apache Ivy

<dependency org="org.webjars.npm" name="angularjs-toast" rev="4.0.0">
  <artifact name="angularjs-toast" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='angularjs-toast', version='4.0.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "angularjs-toast" % "4.0.0"

Leiningen

[org.webjars.npm/angularjs-toast "4.0.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

angularjs-toast

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 [email protected]: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;
    }
  }
}

Versions

Version
4.0.0 Jan 14, 2020