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={{fn (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={{fn (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.