ember-select-spark v0.1.0

{{select-spark}}

A simple way to use \<select>

http://ember-sparks.com/

Installation and usage

Install the Ember Sparks addon (this component is part of the standard library):

ember install ember-sparks

Now restart your Ember app and drop the component in there!

{{select-spark}}

Properties

Actions

Block version

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)

{{#select-spark}}
  <svg></svg>
{{/select-spark}}

Theming

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.

• .select

  Style the select box. When using the block version of the components, the class .has-icon will 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;
  }

• .arrow

  Style the arrow on the right side of the select box.

  Example:

  .select {
    border-width: 9px;
    border-top-color: red;
  }

Contributing

Check out the guidelines at http://ember-sparks.com/docs#contribute