Nit-Picking Magistrate

    ember-spin-button

    0.3.0 • Public • Published

    ember-spin-button

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

    Demo

    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

    Running Tests

    • ember test
    • ember test --server

    Building

    • ember build

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

    Keywords

    Install

    npm i ember-spin-button

    DownloadsWeekly Downloads

    2

    Version

    0.3.0

    License

    MIT

    Last publish

    Collaborators

    • ivanvanderbyl