angular-progress-button-styles

WebJar for angular-progress-button-styles

License

License

MIT
Categories

Categories

Github Development Tools Version Controls Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

github-com-akveo-angular-progress-button-styles
Last Version

Last Version

0.1.0
Release Date

Release Date

Type

Type

jar
Description

Description

angular-progress-button-styles
WebJar for angular-progress-button-styles
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/akveo/angular-progress-button-styles

Download github-com-akveo-angular-progress-button-styles

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-akveo-angular-progress-button-styles/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-akveo-angular-progress-button-styles</artifactId>
    <version>0.1.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-akveo-angular-progress-button-styles/
implementation 'org.webjars.npm:github-com-akveo-angular-progress-button-styles:0.1.0'
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-akveo-angular-progress-button-styles/
implementation ("org.webjars.npm:github-com-akveo-angular-progress-button-styles:0.1.0")
'org.webjars.npm:github-com-akveo-angular-progress-button-styles:jar:0.1.0'
<dependency org="org.webjars.npm" name="github-com-akveo-angular-progress-button-styles" rev="0.1.0">
  <artifact name="github-com-akveo-angular-progress-button-styles" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='github-com-akveo-angular-progress-button-styles', version='0.1.0')
)
libraryDependencies += "org.webjars.npm" % "github-com-akveo-angular-progress-button-styles" % "0.1.0"
[org.webjars.npm/github-com-akveo-angular-progress-button-styles "0.1.0"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.npm : angular jar [1,2)

Project Modules

There are no modules declared in this project.

angular-progress-button-styles

AngularJS version of Codrops progress buttons. I've also made less and sass versions of it besides css.

Check out Live demo!

Basic usage

Install bower package:

bower install --save angular-progress-button-styles

Include scripts and styles (I use FontAwesome for success and error icons, but you can override it):

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-progress-button-styles/dist/angular-progress-button-styles.min.css">
<script type="text/javascript" src="bower_components/angular-progress-button-styles/dist/angular-progress-button-styles.min.js"></script>

Add angular module dependency:

var app = angular.module('app', ['angular-progress-button-styles']);

Add directive to the button element!

<button progress-button="someFunctionThatReturnsPromise()">Submit</button>

That's it! Enjoy the plugin!

Configuration

The directive itself takes as a parameter callback function, that returns promise after execution. If function returns value progress completes instantly. You can configure plugin using two different ways:

  • Using html attributes
  • Using javascript
HTML configuration

Here is a list of supported HTML attributes and their meaning:

Attribute Available values Meaning
pb-style
  • fill
  • shrink
  • rotate-angle-bottom
  • rotate-angle-top
  • rotate-angle-left
  • rotate-angle-right
  • rotate-side-down
  • rotate-side-up
  • rotate-side-left
  • rotate-side-right
  • rotate-back
  • slide-down
  • top-line
  • move-up
  • lateral-lines
  • flip-open
Defines button appearance. Default value is fill.
pb-direction
  • horizontal
  • vertical
To be used with pb-style=(fill or shrink). Defines the direction of the progress bar.
Default value is horizontal.
pb-random-progress
  • true
  • false
Runs random fill function from the moment button is clicked till promise is resolved.
Default value is true.
pb-profile String value The profile from which to fetch configuration during the button initialization.
For more information look JS configuration section
Javascript configuration

For those ones, who don't like to have a lot of configuration in HTML as well to prevent the copy-paste there also is possibility to define configuration in Javascript using profiles. To do this, you need to inject progressButtonConfigProvider during the app configuration:

mdl.config(function(progressButtonConfigProvider) {
  progressButtonConfigProvider.profile('testProfile', {
    style: 'shrink',
    direction: 'vertical'
  });
});

In this example new profile called 'testProfile' created. You can then apply it to you button like this:

<button progress-button="someFunctionThatReturnsPromise()" pb-profile="testProfile">Submit</button>

This would create new button with style shrink and vertical direction.

You can as well define default profile, that will be applied to all the buttons across your application:

progressButtonConfigProvider.profile({
  style: 'shrink',
  direction: 'vertical'
});

License

MIT license.

Contribution

You are welcome to contribute. Feel free to contact me.

Special thanks for contribution:

org.webjars.npm

Akveo

Akveo is a devoted team of engineers, consultants and designers. We'll help you envision, build, and optimize cutting-edge digital products and solutions.

Versions

Version
0.1.0