Integrate ember-power-select into your ember-bootstrap forms
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
addon
app/components/bs-form/element/control
blueprints/ember-bootstrap-power-select
config
tests ember-cli-update Sep 26, 2018
vendor
.editorconfig
.ember-cli
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.template-lintrc.js
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.js
package.json
testem.js
yarn.lock

README.md

ember-bootstrap-power-select

Greenkeeper badge

Build Status Ember Observer Score npm version

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

Installation

You need to have at least 1.0.0-alpha.11 of ember-bootstrap installed in your app. Then run...

ember install ember-bootstrap-power-select

This will additionally install ember-power-select and ember-power-select-blockless 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:

{{#bs-form model=yourModel as |form|}}  
  {{form.element controlType="power-select" property="foo" label="Choose" options=options}}
{{/bs-form}}

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

{{#bs-form model=yourModel as |form|}}  
  {{form.element controlType="power-select" property="foo" label="Choose" options=options optionLabelPath="title"}}
{{/bs-form}}

Power Select Multiple

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

{{#bs-form model=yourModel as |form|}}  
  {{form.element controlType="power-select-multiple" property="foo" label="Choose" options=options}}
{{/bs-form}}

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 and placeholder properties and the onchange action are already wired up to the controlling form.element for you. Set any other options as you need:

{{#bs-form model=yourModel as |form|}}
  {{#form.element controlType="power-select" property="foo" label="Choose" options=options as |el|}}
    {{el.control searchPlaceholder="Type your name"}}
  {{/form.element}}
{{/bs-form}}

You can also use the block form of the component to customize the rendering of the options:

{{#bs-form model=yourModel as |form|}}
  {{#form.element controlType="power-select" property="foo" label="Choose" options=options as |el|}}
    {{#el.control searchPlaceholder="Type your name" as |item|}}
      {{item.name}}
    {{/el.control}}
  {{/form.element}}
{{/bs-form}}

Please consult the ember-power-select documentation for all available options.