ember-spin-button2
Creates a button with a nice spinner.
Initial code comes from ember-spin-button.
(Optional) Design based upon Ladda, but implemented entirely as an Ember Component.
Changes from ember-spin-button
- No bower dependency.
- No forced default button style makes it easy to use with other framework e.g. bootstrap.
- Setting spin-button enabled/disabled is supported and does not come in the way of spinner functionality.
- Title of spin-utton can be set.
Installation
ember install ember-spin-button2
Add the stylesheet include if it wasn't added automatically during installation:
// app/styles/app.scss
@import "spin-button";
Usage
When the button is clicked, it will automatically disable itself and then calls the action
.
Promise based approach (Preferred):
Requires Ember 1.13
In Ember 1.13+, closure 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();
},
}
});
Note that if the button lies in a component, the action must be passed as closure action down the route/component hierarchy (and not using sendAction
).
Non-Promise based approach:
You can manually bind something to indicate the busy state to inFlight
attribute.
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
.
defaultTimeout
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/.