ember-input-spark

0.1.2 • Public • Published

{{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

Package Sidebar

Install

npm i ember-input-spark

Weekly Downloads

1

Version

0.1.2

License

MIT

Last publish

Collaborators

  • t4t5