Bootstrap.Button Class
addon/components/bs-button.js:5
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);
}
}
});
Item Index
Methods
Methods
click
-
evt
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']
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.
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