Components.ButtonGroup public

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 provided as a yielded pre-configured contextual component:

<BsButtonGroup as |bg|>
  <bg.button>1</bg.button>
  <bg.button>2</bg.button>
  <bg.button>3</bg.button>
</BsButtonGroup>

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:

<BsButtonGroup @value={{this.buttonGroupValue}} @type="radio" @onChange={{action (mut this.buttonGroupValue}} as |bg|>
  <bg.button @type="default" @value={{1}}>1</bg.button>
  <bg.button @type="default" @value={{2}}>2</bg.button>
  <bg.button @type="default" @value={{3}}>3</bg.button>
</BsButtonGroup>

You selected: {{this.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:

<BsButtonGroup @value={{this.buttonGroupValue}} @type="checkbox" @onChange={{action (mut this.buttonGroupValue}} as |bg|>
  <bg.button @type="default" @value={{1}}>1</bg.button>
  <bg.button @type="default" @value={{2}}>2</bg.button>
  <bg.button @type="default" @value={{3}}>3</bg.button>
</BsButtonGroup>

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

Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.

Item Index

Events

buttonComponent {String} private

justified boolean public

Default: false

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

Set to true for the buttons to stretch at equal sizes to span the entire width of its parent. (BS3 only!)

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

<div class="btn-group" role="group">
            
            </div>
            

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

size String public

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

Also see the Bootstrap docs

type string public

Default: null

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

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 value property of the button group will reflect the value property of the active button
  • thus only one button may be active

checkbox

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

  • 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

value array public

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

Default: false

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

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

onChange

public

This action is called whenever the button group's value should be changed because the user clicked a button. You will receive the new value of the button group (based on the type property), which you should use to update the value property.

Event Payload:

  • value
Classes