@abcum/ember-select 中文文档教程
ember-select
用于向 Ember.js 应用程序添加选择框和下拉菜单的实用程序。
Usage
Installation
ember install @abcum/ember-select
Introduction
ember-select 插件添加了添加 h 的功能 tml5 通过构建菜单选项而不是传入数据对象来选择输入和自定义下拉菜单到 Ember.js 应用程序。 菜单可以支持自定义样式、多选和自定义内部 html。
Examples
要在模板中创建选择菜单，请使用 input-select 组件。
每个选项都是使用 input.option 特殊组件定义的，它采用 value 和 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}}
要在模板中显示输入弹出菜单，请使用 input-popup 组件。
每个选项都是使用 input.option 特殊组件定义的，它采用 value 和 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}}
要将某些选项组合在一起，请使用 input.group，并将 input.option 元素放在每个组中。
{{!-- 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}}
要显示对特定输入选项使用自定义 html 或样式，请使用块助手。
{{!-- 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}}
要启用多选选择菜单或弹出菜单，请将 multiple 属性设置为 true，并使用 default属性。
select 操作返回的值现在将是一个选项数组（如果选择了任何选项）。
{{!-- 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}}
要设置模态背景和模态窗口本身的样式，请遵循下面的 css 样式代码。
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)
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)
