Show:

Implements a HTML button element, with support for all Bootstrap button CSS styles as well as advanced functionality such as button states.

Basic Usage

{{#bs-button type="primary" icon="glyphicon glyphicon-download"}}Download{{/bs-button}}

Actions

Set the action property of the component to send an action to your controller. The following parameters will be sent:

  • value: the button's value, see the value property
  • event: the browsers event object
  • callback: a function that may be called from the action handler to supply a Promise to the button component for automatic state handling
{{#bs-button type="primary" icon="glyphicon glyphicon-download" action="download"}}
   Download
{{/bs-button}}

States

Use the textState property to change the label of the button. You can bind it to a controller property to set a "loading" state for example. The label of the button will be taken from the <state>Text property.

{{bs-button type="primary" icon="glyphicon glyphicon-download" textState=buttonState defaultText="Download" loadingText="Loading..." action="download"}}
App.ApplicationController = Ember.Controller.extend({
  buttonState: "default"
  actions: {
    download: function() {
      this.set("buttonState", "loading");
    }
  }
});

Promise support for automatic state change

When using the callback function of the click action to supply a Promise for any asynchronous operation the button will manage its textState property automatically, changing its value according to the state of the promise: "default" > "pending" > "resolved"/"rejected"

{{bs-button type="primary" icon="glyphicon glyphicon-download" defaultText="Download" pendingText="Loading..." resolvedText="Completed!" rejectedText="Oups!?" action="download"}}
App.ApplicationController = Ember.Controller.extend({
  actions: {
    download: function(actionParam, evt, cb) {
      promise = new Ember.RSVP.Promise(...);
      cb(promise);
    }
  }
});

Methods

click

(
  • evt
)
protected

Click handler. This will send the default "action" action, with the following parameters:

  • value of the button (that is the value of the "value" property)
  • original event object of the click event
  • callback: call that with a promise object, and the buttons state will automatically set to "pending", "resolved" and/or "rejected"

Parameters:

  • evt Object

resetState

()

This will reset the state property to 'default', and with that the button's label to defaultText

Properties

active

Boolean

Set the 'active' class to apply active/pressed CSS styling

Default: false

attributeBindings

Array protected

Default: ['id', 'disabled', 'buttonType:type']

block

Boolean

Property for block level buttons

See the Bootstrap docs

Default: false

buttonType

String

Set the type of the button, either 'button' or 'submit'

Default: 'button'

classNameBindings

Array protected

Default: ['active', 'block:btn-block']

classNames

Array protected

Default: ['btn']

classTypePrefix

String protected

Default: 'btn'

defaultText

Unknown

Default label of the button. Not need if used as a block component

disabled

Unknown

Property to disable the button

icon

String

Class(es) (e.g. glyphicons or font awesome) to use as a button icon This will render a element in front of the button's label

iconActive

String

If button is active and this is set, the icon property will match this property

iconInactive

String

If button is inactive and this is set, the icon property will match this property

reset

Boolean

Set this to true to reset the state. A typical use case is to bind this attribute with ember-data isDirty flag.

size

String

Property for size styling, set to 'lg', 'sm' or 'xs'

Also see the Bootstrap docs

textState

String

State of the button. The button's label (if not used as a block component) will be set to the <state>Text property. This property will automatically be set when using a click action that supplies the callback with an promise

Default: 'default'

toggle

Boolean

If toggle property is true, clicking the button will toggle the active state

Default: false

type

String

Property for type styling

For the available types see the Bootstrap docs (use without "btn-" prefix)

Default: 'default'

value

Any

Supply a value that will be associated with this button. This will be send as a parameter of the default action triggered when clicking the button