https://github.com/britishgas-engineering/bg-button-group
Lightweight component for grouping buttons and sending 1 action when the user clicks on one of the buttons.
https://github.com/britishgas-engineering/bg-button-group
ember-addon library open-technology-platform
Last synced: about 1 month ago
JSON representation
Lightweight component for grouping buttons and sending 1 action when the user clicks on one of the buttons.
- Host: GitHub
- URL: https://github.com/britishgas-engineering/bg-button-group
- Owner: britishgas-engineering
- License: mit
- Created: 2016-12-20T10:01:28.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T16:24:23.000Z (over 3 years ago)
- Last Synced: 2026-05-27T13:37:07.448Z (about 1 month ago)
- Topics: ember-addon, library, open-technology-platform
- Language: JavaScript
- Homepage: https://britishgas-engineering.github.io/bg-button-group/
- Size: 3.37 MB
- Stars: 1
- Watchers: 5
- Forks: 1
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](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
a label
another label
```
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/).