ember-input-spark

{{input-spark}}

A replacement for <input>

http://www.ember-sparks.com/

---

Installation and usage

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

ember install ember-sparks

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

{{input-spark
  placeholder="Start typing"
}}

Properties

Name	Type	Default	Description
value	string	null	The predefined value of the input.
placeholder	string	null	The text to be displayed before the user enters a value.
prefix	string	null	The prefix to be displayed before the user's input. This comes in handy if you want to show a domain name in front of a username input for example.
label	boolean/string	true	The label to show on top of the input, when the placeholder is no longer visible. If set to true, it will have the same value as placeholder.
maxlength	number	unlimited	The maximum number of characters that the user can type.
disabled	boolean	false	Determines whether the input should be disabled or not.
error	string	null	Specifies an error with the input. If it's set, an error message will appear underneath.
errorComponent	string	input-spark/error-spark	The name of the component to render for error messages. You can overwrite the default one, as long as you make sure it accepts the error property.
scrollOnError	boolean	false	Determines whether the page should scroll to the input when error is set. This is handy if your page is long, and you want the user to automatically be taken to whichever input is faulty.

Actions

Name	Description
onKeyUp	Triggers when the user releases a key.
onKeyDown	Triggers when the user presses down a key.
onEnter	Triggers when the user pressed the enter key.
onFocus	Triggers when the user focuses on the input.
onBlur	Triggers when the user blurs (stops focusing) on the input.
onInput	Triggers when the user changes the value of the input.
onFinishTyping	Triggers when the user hasn't typed anything new for 1 second.
onChange	Triggers when the user has changed the value of the input and then focuses out of it.

Block version

If you use the blocking version of the component, you can set an icon at the beginning of the input. This can be done through inline SVG (recommended), an icon font or an img-tag.

{{#input-spark}}
  <svg role="img">
    <use xlink:href="/assets/icons.svg#user"></use>
  </svg>
{{/input-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.

• .container

  Set some default settings here, such as width, font-size... etc.

  Example:

  .container {
    font-size: 11px;
  }
  

• .input

  The (virtual) input box that the user interacts in. If the input is focused, the class .focused is appended to it. If the input is disabled, the class .disabled is appended to it. If the error bubble is showing, the class .has-error is appended to it.

  Example:

  .input {
    background-color: #ffd9d5;
  }
  

• .prefix

  Style the prefix at the beginning of the input.

  Example:

  .prefix {
    color: blue;
  }
  

• .icon

  Style the icon container that contains the eventual SVG icon. Block mode only.

• .label

  Style the floating label above the input.

  Example:

  .label {
    color: red;
  }
  

• .error

  Style the default error box.

  Example:

  .prefix {
    background-color: #ffdc30;
    color: #af7c38;
  }
  

Contributing

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