README

ember-bootstrap-power-select

Integrate Ember Power Select into your Ember Bootstrap forms.

Compatibility

Ember Power Select v4 or above
Ember Bootstrap v4 or above
Ember.js v3.16 or above
Ember CLI v3.15 or above
Node.js v10 or above

Installation

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:

<BsForm @model={{yourModel}} as |form|>
  <form.element @controlType="power-select" @property="foo" @label="Choose" @options={{options}} />
</BsForm>

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

<BsForm @model={{yourModel}} as |form|>
  <form.element @controlType="power-select" @property="foo" @label="Choose" @options={{options}} @optionLabelPath="title" />
</BsForm>

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

<BsForm @model={{yourModel}} as |form|>
  <form.element @controlType="power-select" @property="author" @label="Author" @options={{options}} as |el|>
    <el.control as |option|>
      {{option.name}} (b. {{format-date option.dayOfBirth}})
    </el.control>
  </form.element>
</BsForm>

Power Select Multiple

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

<BsForm @model={{yourModel}} as |form|>
  <form.element @controlType="power-select-multiple" @property="foo" @label="Choose" @options={{options}} />
</BsForm>

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:

<BsForm @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>
</BsForm>

Please consult the Ember Power Select documentation for all available options.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

Usage no npm install needed!