A simple way to use <select>
Install the Ember Sparks addon (this component is part of the standard library):
ember install ember-sparksNow restart your Ember app and drop the component in there!
| Name | Type | Default | Description |
|---|---|---|---|
options | array | null | A list of options that the user can select. The array can either contain just strings, or objects with the keys value and label (recommended). |
selected | string | null | The default selected option. Must match one of your options' value. |
disabled | boolean | false | Determine whether the user can interact with the select box or not. |
title | string | null | An optional "title" for the select box, which is simply a disabled <option>. |
| Name | Description |
|---|---|
onChange | Triggers when the user selects a new value. |
If you use the component as a block, you can set an icon for it (this icon could also change depending on what the user selects)
To see these examples in action, check out the interactive documentation.
Important! All classes are local in order to avoid naming collisions and unintended CSS side effects. To understand how to style them, check out the Ember Sparks documentation.
-
.selectStyle the select box. When using the block version of the components, the class
.has-iconwill be appended to it.Example:
.select { background: linear-gradient(to bottom, white, #F1F5F9); border: 1px solid #AEBEC8; border-radius: 6px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08); color: #586576; }
-
.arrowStyle the arrow on the right side of the select box.
Example:
.select { border-width: 9px; border-top-color: red; }
Check out the guidelines at http://ember-sparks.com/docs#contribute