ember-bootstrap

API Docs 0.11.3.33c7ec07

Components.ButtonGroup Class

public
Uses
Extends Ember.Component
Defined in: addon/components/bs-button-group.js:7

Bootstrap-style button group, that visually groups buttons, and optionally adds radio/checkbox like behaviour. See http://getbootstrap.com/components/#btn-groups

Use as a block level component with any number of Components.Button components as children:

{{#bs-button-group}}
  {{#bs-button}}1{{/bs-button}}
  {{#bs-button}}2{{/bs-button}}
  {{#bs-button}}3{{/bs-button}}
{{/bs-button-group}}

Radio-like behaviour

Use the type property set to "radio" to make the child buttons toggle like radio buttons, i.e. only one button can be active. Set the value property of the buttons to something meaningful. The value property of the button group will then reflect the value of the active button:

{{#bs-button-group value=buttonGroupValue type="radio"}}
  {{#bs-button value='foo'}}foo{{/bs-button}}
  {{#bs-button value='bar'}}bar{{/bs-button}}
  {{#bs-button value='baz'}}baz{{/bs-button}}
{{/bs-button-group}}

You selected: {{buttonGroupValue}}!

Checkbox-like behaviour

Set type to "checkbox" to make any number of child buttons selectable. The value property will be an array of all the values of the active buttons:

{{#bs-button-group value=buttonGroupValue type="checkbox"}}
  {{#bs-button value='foo'}}foo{{/bs-button}}
  {{#bs-button value='bar'}}bar{{/bs-button}}
  {{#bs-button value='baz'}}baz{{/bs-button}}
{{/bs-button-group}}

You selected:
<ul>
{{#each value in buttonGroupValue}}
  <li>{{value}}</li>
{{/each}}
</ul>
Show:

Properties

activeChildren array

protected

Defined in addon/components/bs-button-group.js:176

Child buttons that are active (pressed)

ariaRole string

protected

Defined in addon/components/bs-button-group.js:64

Default: 'group'

classNameBindings array

protected

Defined in addon/components/bs-button-group.js:80

classNames array

protected

Defined in addon/components/bs-button-group.js:72

Default: ['btn-group']

classTypePrefix String

protected

Inherited from Mixins.SizeClass but overwritten in addon/components/bs-button-group.js:87

Default: 'btn-group'

justified boolean

public

Defined in addon/components/bs-button-group.js:105

Set to true for the buttons to stretch at equal sizes to span the entire width of its parent.

Important: You have to wrap every button component in a div class="btn-group">:

<div class="btn-group" role="group">
                    {{#bs-button}}My Button{{/bs-button}}
                    </div>

See http://getbootstrap.com/components/#btn-groups-justified

Default: false

size String

public

Inherited from Mixins.SizeClass: addon/mixins/size-class.js:30

Property for size styling, set to 'lg', 'sm' or 'xs' Also see the [Bootstrap docs](http://getbootstrap.com/css/#buttons-sizes)

type string

public

Defined in addon/components/bs-button-group.js:125

The type of the button group specifies how child buttons behave and how the value property will be computed:

null

If type is not set (null), the button group will add no functionality besides Bootstrap styling

radio

if type is set to "radio", the buttons will behave like radio buttons:

  • the buttons will toggle (toggle property of the child buttons will be set to true)
  • only one button may be active
  • the value property of the button group will reflect the value property of the active button

checkbox

if type is set to "checkbox", the buttons will behave like checkboxes:

  • the buttons will toggle (toggle property of the child buttons will be set to true)
  • any number of buttons may be active
  • the value property of the button group will be an array containing the value properties of all active buttons

Default: null

value array

public

Defined in addon/components/bs-button-group.js:150

The value of the button group, computed by its child buttons. See the type property for how the value property is constructed.

When you set the value, the corresponding buttons will be activated:

  • use a single value for a radio button group to activate the button with the same value
  • use an array of values for a checkbox button group to activate all the buttons with values contained in the array

vertical boolean

public

Defined in addon/components/bs-button-group.js:95

Set to true for a vertically stacked button group, see http://getbootstrap.com/components/#btn-groups-vertical

Default: false

Classes