项目作者: rajasegar

项目描述 :
Ember async buttons with loading indicators
高级语言: CSS
项目地址: git://github.com/rajasegar/ember-loading-button.git
创建时间: 2017-07-26T06:06:58Z
项目社区:https://github.com/rajasegar/ember-loading-button

开源协议:MIT License

下载


ember-loading-button

Build Status
npm
npm version
MIT license
EmberObserver

An Ember button component addon for Asynchronous actions with loading indicators.

Heavily inspired by this Ladda Buttons

Demo

Demo

Installation

  • ember install ember-loading-button

Usage

With Default Loading indicator

  1. {{#loading-button
  2. transition="expand-left"
  3. action=(action 'promiseAction')}}
  4. Submit
  5. {{/loading-button}}

With an optional loading indicator

  1. {{#loading-button
  2. loaderStyle="bars"
  3. transition="expand-right"
  4. action=(action 'promiseAction')}}
  5. Submit
  6. {{/loading-button}}

With customClass to override the styles

  1. {{#loading-button
  2. transition="expand-down"
  3. customClass="btn-warning"
  4. action=(action 'promiseAction') }}
  5. Submit
  6. {{/loading-button}}

Properties

transition

The style for the loading indicator which indicates how and where the loader is placed within the button.

List of available styles:

  • expand-left
  • expand-right
  • expand-down
  • expand-up
  • contract
  • zoom-in
  • zoom-out
  • slide-left
  • slide-right
  • slide-up
  • slide-down

action

Closure action parameter to execute when the button is clicked , will be returning a Promise based on which the
button states are derived and the UI is rendered.

customClass

This will get the name of the custom class name with which you want to override your button styles.

size

Various size options for the button

List of available sizes:

  • xs => Extra Small
  • s => Small
  • l => Large
  • xl => Extra Large

loaderStyle

The type of loader you want to choose from:

  • circular-dots-fade
  • bars
  • rotating-slice
  • fading-circle
  • scaling-circles
  • trailing-dots
  • horizontal-dots

Credits

Compatibility

  • Ember.js v3.12 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.