Node's Pastoral Musicians

    ember-bootstrap-power-select

    4.1.0 • Public • Published

    ember-bootstrap-power-select

    CI Ember Observer Score npm version

    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.16 or above
    • Node.js v12 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.

    Install

    npm i ember-bootstrap-power-select

    DownloadsWeekly Downloads

    1,718

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    25.7 kB

    Total Files

    17

    Last publish

    Collaborators

    • simonihmig
    • lolmaus
    • andreasschacht
    • jelhan