https://github.com/ember-bootstrap/ember-bootstrap-power-select

Integrate ember-power-select into your ember-bootstrap forms
https://github.com/ember-bootstrap/ember-bootstrap-power-select

ember ember-addon ember-bootstrap ember-power-select

Last synced: 4 days ago
JSON representation

Integrate ember-power-select into your ember-bootstrap forms

• Host: GitHub
• URL: https://github.com/ember-bootstrap/ember-bootstrap-power-select
• Owner: ember-bootstrap
• License: mit
• Created: 2017-04-20T23:23:13.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-11-13T21:23:25.000Z (about 2 months ago)
• Last Synced: 2024-12-29T10:10:28.025Z (11 days ago)
• Topics: ember, ember-addon, ember-bootstrap, ember-power-select
• Language: JavaScript
• Size: 2.88 MB
• Stars: 40
• Watchers: 3
• Forks: 13
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-bootstrap-power-select

![CI](https://github.com/kaliber5/ember-bootstrap-power-select/workflows/CI/badge.svg)

[![Ember Observer Score](https://emberobserver.com/badges/ember-bootstrap-power-select.svg)](https://emberobserver.com/addons/ember-bootstrap-power-select)

[![npm version](https://badge.fury.io/js/ember-bootstrap-power-select.svg)](https://badge.fury.io/js/ember-bootstrap-power-select)

Integrate [Ember Power Select](http://www.ember-power-select.com/) into your [Ember Bootstrap](https://www.ember-bootstrap.com)

forms.

## Compatibility

* Ember Power Select v6 or above

* Ember Bootstrap v5 or above

* Ember.js v3.28 or above

* Ember CLI v3.28 or above

* Node.js v14 or above

## Installation

```bash

ember install ember-bootstrap-power-select

```

This will additionally install `ember-power-select` into your app, and setup its

Bootstrap theme, either by importing the appropriate Less or Sass file (if you use one of these preprocessors), or by

editing your `ember-cli-build.js` to include the static theme CSS (if you use plain CSS). 

## Usage

With this addon installed, you have a new `controlType` of `power-select` available. Use the `options` property to

set the array of selectable options:

```hbs

  

```

If your options array consists of objects, use the `optionLabelPath` to specify the property that should be used as the

options label:

```hbs

  

```

If you need more control over how the options label are rendered (e.g. for formatting or internalization) you should use the yielded `` component in block mode:

```hbs

  

    

      {{option.name}} (b. {{format-date option.dayOfBirth}})

    

  

```

### Power Select Multiple

The `power-select-multiple` is also supported and works similarly to the `power-select` implementation.

```hbs

  

```

### Advanced usage

If you need more control of the power-select configuration, use the yielded `control` component to get direct access

to the power-select component. The power-select's `selected`, `disabled` properties and the `onChange`

action are already wired up to the controlling `form.element` for you. Set any other options as you need:

```hbs

  

    

  

```

Please consult the [Ember Power Select documentation](http://www.ember-power-select.com/docs) for all available options.

## Contributing

See the [Contributing](CONTRIBUTING.md) guide for details.

## License

This project is licensed under the [MIT License](LICENSE.md).