Git Product home page Git Product logo

angular-flash's Introduction

license travis bower npm

angular-flash

A simple lightweight flash message module for AngularJS and Bootstrap.

Demo

angular-flash | jsfiddle | codepen

How to use

npm

You can also find angular-flash on npm

$ npm install angular-flash-alert

Bower

You can Install angular-flash using the Bower package manager.

$ bower install angular-flash-alert --save

Add the Following code to the <head> of your document.

<link type="text/css" rel="stylesheet" href="dist/angular-flash.min.css" />
// If you are using bootstrap v3 no need to include angular-flash.css
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="dist/angular-flash.min.js"></script>
// Do not include both angular-flash.js and angular-flash.min.js

Add ngFlash dependency to your module

var myApp = angular.module("app", ["ngFlash"])

Include directive below in your HTML template.

<flash-message duration="5000" show-close="true" on-dismiss="myCallback(flash);"></flash-message> 
<!-- 
5000ms as the default duration to show flash message.
Show the close button (x on the right).
Call myCallback with flash dismissed as parameter when flash has been dismissed.
-->

Inject the Flash factory in your controller

myApp.controller('demoCtrl', ['Flash', function(Flash) {
    $scope.successAlert = function () {
        var message = '<strong>Well done!</strong> You successfully read this important alert message.';
        var id = Flash.create('success', message, 0, {class: 'custom-class', id: 'custom-id'}, true);
        // First argument (string) is the type of the flash alert.
        // Second argument (string) is the message displays in the flash alert (HTML is ok).
        // Third argument (number, optional) is the duration of showing the flash. 0 to not automatically hide flash (user needs to click the cross on top-right corner).
        // Fourth argument (object, optional) is the custom class and id to be added for the flash message created. 
        // Fifth argument (boolean, optional) is the visibility of close button for this flash.
        // Returns the unique id of flash message that can be used to call Flash.dismiss(id); to dismiss the flash message.
    }
}]);

####Flash types####

  • success
  • info
  • warning
  • danger

Methods

These methods are mostly for internal usage but can be used also from outside.

Flash.dismiss(1);
// Dismiss the flash with id of 1. Id is not the index of flash but instead a value returned by Flash.create()
Flash.clear();
// Dismisses all flashes shown.

Animating

You can animate the flash messages via traditional Angular way by including ngAnimate as a dependency of your application and then defining the CSS transitions for different classes (ng-enter, ng-move, ng-leave) provided by Angular.

Example:

.alert.ng-leave {
  opacity: 1;
  transition: opacity 1.5s ease-out;
}
.alert.ng-leave-active {
  opacity: 0;
}

Running tests

npm install
./node_modules/karma/bin/karma start

Contributors

License

MIT © Sachin Choluur

angular-flash's People

Contributors

beppler avatar roopehakulinen avatar sachinchoolur avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.