ember-select
A utility for adding select boxes and dropdown menus to an Ember.js app.
Usage
Installation
ember install @abcum/ember-select
Introduction
The ember-select addon adds functionality for adding html5 select inputs, and custom dropdown menus to an Ember.js app, by building the menu options instead of passing in data objects. Menus can support custom styling, multi-select, and custom inner html.
Examples
To create a select menu in the template use the input-select component.
Each option is defined using the input.option special component, which takes a value and label.
{{!-- app/templates/author.hbs --}}
Author type:
{{#input-select value=model.type select=(action (mut model.type)) as |input|}}
{{input.option label='Not known'}}
{{input.option value="author" label="Author"}}
{{input.option value="reviewer" label="reviewer"}}
{{input.option value="collaborator" label="Collaborator"}}
{{/input-select}}To show an input popup menu in the template use the input-popup component.
Each option is defined using the input.option special component, which takes a value and label.
{{!-- app/templates/author.hbs --}}
Author type:
{{#input-popup value=model.type select=(action (mut model.type)) as |input|}}
{{input.option label='Not known'}}
{{input.option value="author" label="Author"}}
{{input.option value="reviewer" label="reviewer"}}
{{input.option value="collaborator" label="Collaborator"}}
{{/input-popup}}To group certain options together make use of the input.group, and place the input.option elements within each group.
{{!-- app/templates/user.hbs --}}
User permissions:
{{#input-popup value=model.perms select=(action (mut model.perms)) as |input|}}
{{input.option label='No permissions'}}
{{#input.group label='Reading'}}
{{input.option value="view" label="Can view posts"}}
{{input.option value="comment" label="Can view and comment on posts"}}
{{/input.group}}
{{#input.group label='Writing'}}
{{input.option value="write" label="Can write posts"}}
{{input.option value="alter" label="Can write and alter other's posts"}}
{{input.option value="full" label="Can write, alter, and delete posts"}}
{{/input.group}}
{{/input-popup}}To show use custom html or styling for a specific input option, use a block helper.
{{!-- app/templates/user.hbs --}}
User permissions:
{{#input-popup value=model.perms select=(action (mut model.perms)) as |input|}}
{{input.option label='No permissions'}}
{{#input.group label='Reading'}}
{{input.option value="view" label="Can view posts"}}
{{input.option value="comment" label="Can view and comment on posts"}}
{{/input.group}}
{{#input.group label='Writing'}}
{{input.option value="write" label="Can write posts"}}
{{input.option value="alter" label="Can write and alter other's posts"}}
{{#input.option value="full"}}
<span style="color:red;">Can write, alter, and delete posts</span>
{{/input-option}}
{{/input.group}}
{{/input-popup}}To enable a multi-select select menu or popup menu, set the multiple attribute to true, and set the default text for the menu, using the default attribute.
The value returned with the select action will now be an array of options (if any are selected).
{{!-- app/templates/user.hbs --}}
User permissions:
{{#input-popup value=model.perms multiple=true default='Specify permissions' select=(action (mut model.perms)) as |input|}}
{{#input.group label='Reading'}}
{{input.option value="view" label="Can view posts"}}
{{input.option value="comment" label="Can comment on posts"}}
{{/input.group}}
{{#input.group label='Writing'}}
{{input.option value="write" label="Can write posts"}}
{{input.option value="alter" label="Can alter posts"}}
{{#input.option value="full"}}
<span style="color:red;">Can delete posts</span>
{{/input-option}}
{{/input.group}}
{{/input-popup}}To style the modal background and the modal window itself, follow the css styling code below.
input-popup > label {
// Styles for the display text
}
input-popup > input-popup-front {
// Styles for the popup menu
}
input-popup > input-popup-front input-popup-option {
// Styles for a popup menu option
}
input-popup > input-popup-front input-popup-group > label {
// Styles for a popup menu group
}
Development
-
make install (install bower and ember-cli dependencies)
-
make upgrade (upgrade ember-cli to the specified version)
-
make tests (run all tests defined in the package)
