Bg-button-group NPM

Bg-button-group

Lightweight component for groupping buttons and sending 1 action when the user clicks on one of the buttons.

Value can be any of data types even ember objects.

Here at British Gas we use bootstrap therefore the rendered buttons have the added btn class.

Example:

Assume there is a buttons array like:

  buttons: [{id: 1, label: 'apple'}, {id: 2, label: 'melon'}],

Template:

      {{#bg-button-group onButtonClick=(action 'onButtonClickHandler') selectedValue=selectedValue as |bg|}}
        {{#each buttons as |btn|}}
          {{#bg.button class="btn-success" value=btn}}
            {{btn.label}}
          {{/bg.button}}
        {{/each}}
      {{/bg-button-group}}

If you want to use as bootstrap botton group feature, simple add btn-group (or similar) class to the component.

      {{#bg-button-group class="btn-group" onButtonClick=(action 'onButtonClickHandler') selectedValue=selectedValue as |bg|}}

Handling event (catching the clicked value)

set onButtonClick action which passes the value set to the button previously

Preselected button

Use selectedValue attrinbute and pass the same value what you passed to the button.

Rendered html

<div>
  <button class="btn text-center bg-button" id="ember123">a label</button>
  <button class="btn text-center bg-button" id="ember125">another label</button>
</div>

DEMO page here: (https://britishgas-engineering.github.io/bg-button-group)