项目作者: rajasegar

项目描述 :
Creative progress indicators for Ember async buttons
高级语言: JavaScript
项目地址: git://github.com/rajasegar/ember-progress-button.git
创建时间: 2017-06-15T14:06:20Z
项目社区:https://github.com/rajasegar/ember-progress-button

开源协议:MIT License

下载


ember-progress-button

Build Status
npm
npm version
MIT license
EmberObserver

Better User experience with asynchronous actions using Buttons with stylish progress indicators.
This can be used as an aesthetic alternative to ember-async-button

The underlying thing which drives the component click action is a Promise just like your ember-async-button,
but it will show you a progress indicator until the promise object is fulfilled, resolved or rejected.

Hence here you need NOT to specify different texts for different promise states but it will show indications
through progress, success and error animations for pending, resolved and rejected states respectively.

Based on the stylish progress button styles by Codrops
Article

Demo

Demo

Installation

  1. ember install ember-progress-button

Usage

  1. {{#progress-button action=(action 'promiseAction') style="shrink"}}Submit{{/progress-button}}

Properties

Ember progress buttons take only two properties:

  • action => for the action performed when you click the button
  • style => the type of progress bar you want on the button

Styles

Ember progress buttons come with about 18 different styles for progress indications.
Just give any one of the following values for the style attribute of the component.

  • fill (default)
  • fill with vertical=true
  • shrink
  • shrink with vertical=true
  • 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
  • flip-open
  • slide-down
  • move-up
  • top-line
  • lateral-lines with vertical=true

Some of the above styles may require the vertical attribute set to true such as fill, shrink and lateral-lines.

Theme Customization

You can customize the button css colors suiting your choice and preference using the following css variables.

  1. :root {
  2. --progress-button-bg: #1d9650; /* Button background color */
  3. --progress-button-fg: #fff; /* Button text color */
  4. --progress-bar-bg: #0e7138; /* Progress bar color */
  5. }

For over-riding the Success and Error state icons, you can use any icon fonts and override the below classes.
Say for example , you want to use font-awesome icons, just set the font-family to font-awesome and
modify the before and after properties like:

  1. .progress-button .content::before,
  2. .progress-button .content::after {
  3. font-family: "font-awesome";
  4. }
  5. .progress-button .content::before {
  6. content: "\e600"; /* Checkmark for success */
  7. }
  8. .progress-button .content::after {
  9. content: "\e601"; /* Cross for error */
  10. }

To have full control for the button appearance you can write your own styles for the button class:

  1. .progress-button {
  2. /* Put your styles here */
  3. }

Running

Running Tests

  • npm test (Runs ember try:each to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit https://ember-cli.com/.

Credits