ember-spin-button

Creates a button with a nice spinner to the side. Design based upon Ladda, but implemented entirely as an Ember Component.

Installation

ember install ember-spin-button

Add the stylesheet include if it wasn't added automatically during installation:

// app/styles/app.scss
@import "spin-button";

Usage

{{#spin-button 
    action=(action "createUser")
    buttonStyle="expand-right"}}Create User{{/spin-button}}

You can manually bind something to indicate the busy state to inFlight, or simply return a promise from your action handler (Ember 1.13+) and the button will indicate a busy state while the promise is resolving.

The button will automatically disable itself when you click it, after calling the action.

Example Closure Action returning a promise:

Requires Ember 1.13

In Ember 1.13+, action handlers can have return values. If you return a promise in your action handler, ember-spin-button will automatically use the state of the promise to indicate progress.

// some-controller.js
import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    saveRecord: function() {
      // Save returns a Promise from Ember Data which resolves when the model is saved.
      return this.get('model').save();
    },
  }
});

<!-- my-template.hbs -->
{{#spin-button action=(action "saveRecord")}}Save Changes{{/spin-button}}

Configuration

startDelay

A delay before showing the animation, but after disabling the button.

Default: 150ms. Any value <4ms will disable this feature.

inFlight (deprecated)

Binds the busy state of the button.

Default: false.

defaultTimout

A timeout after which the button will return to its default, non-in-flight state. Set to a falsy value to disable.

Default: 2E3. Any falsy value will disable this feature.

color

You can specify one of the predefined colors, or define your own using the buttonColor mixin:

@include buttonColor( 'red', #FF0000 );

Predefined colors:

• green
• purple
• mint
• red
• blue

buttonStyle

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

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

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