Creates a button with a nice spinner to the side. Design based upon Ladda, but implemented entirely as an Ember Component.
ember install ember-spin-button
Add the stylesheet include if it wasn't added automatically during installation:
// app/styles/app.scss
@import "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
.
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();
},
}
});
A delay before showing the animation, but after disabling the button.
Default: 150ms
. Any value <4ms will disable this feature.
Binds the busy state of the button.
Default: false
.
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.
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
expand-right
expand-left
expand-down
expand-up
contract
contract-overlay
zoom-in
zoom-out
slide-left
slide-right
slide-up
slide-down
git clone
this repositorynpm install
bower install
ember server
- Visit your app at http://localhost:4200.
ember test
ember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.