# bg-button-group

> Ember CLI button group component

Latest version **0.0.8** (published 2019-08-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install bg-button-group
pnpm add bg-button-group
yarn add bg-button-group
bun add bg-button-group
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2019-08-05 |
| First published | 2016-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 6.* \|\| 8.* \|\| >= 10.* |
| Dependencies | 3 |
| Unpacked size | 8.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | britishgas-engineering |
| Keywords | ember-addon |

## Links

- npm: https://www.npmjs.com/package/bg-button-group
- Repository: https://github.com/britishgas-engineering/bg-button-group
- Homepage: https://github.com/britishgas-engineering/bg-button-group#readme
- Issues: https://github.com/britishgas-engineering/bg-button-group/issues
- npm.io page: https://npm.io/package/bg-button-group

## Dependencies (3)

- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^6.6.0
- [ember-cli-htmlbars](https://npm.io/package/ember-cli-htmlbars.md) ^2.0.1
- [ember-cli-htmlbars-inline-precompile](https://npm.io/package/ember-cli-htmlbars-inline-precompile.md) ^1.0.0

## Recent versions

- 0.0.8 (latest) — 2019-08-05
- 0.0.7 — 2018-08-16
- 0.0.6 — 2017-11-30
- 0.0.5 — 2017-08-14
- 0.0.4 — 2017-01-13
- 0.0.3 — 2016-12-20
- 0.0.1 — 2016-12-20

## README

[![Build Status](https://travis-ci.org/britishgas-engineering/bg-button-group.svg?branch=master)](https://travis-ci.org/britishgas-engineering/bg-button-group)

# 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:

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

Template:

```hbs
      {{#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.
```hbs
      {{#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

```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)

## Installation

* ember install bg-button-group

## Running

* `ember serve`
* Visit your app at http://localhost:4200.

## Running Tests

* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions)
* `ember test`
* `ember test --server`

## Building

* `ember build`

For more information on using ember-cli, visit [http://ember-cli.com/](http://ember-cli.com/).

---
_Source: https://npm.io/package/bg-button-group · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._