ember-paper-input

An animated floating label addon for Ember.

Install

ember install ember-paper-input

or add the addon in your package.json file

"ember-paper-input": "git+https://github.com/boseca/ember-paper-input.git"

Usage

Example with required input.

{{#ember-paper-input}}
	{{input id="txt-firstname" type="text" required=true placeholder='John'}}
	<label for="txt-firstname">First name</label>
{{/ember-paper-input}}

Example with non-required input.

{{#ember-paper-input selected=model.address}}
	{{input value=model.address type="text" placeholder="123 Lawrence"}}
	<label>Address</label>
{{/ember-paper-input}}

Example with 3rd party controls (in this case power-select control). The addon will observe the value of selected and when it's changed it will animate the label.

{{#ember-paper-input selected=selectedCountry}}
	{{#power-select selected=selectedCountry options=countryList searchField="country" placeholder="Country" onchange=(action (mut selectedCountry)) as |country|}}
		{{country.country}}
	{{/power-select}}
	<label>Country</label>
{{/ember-paper-input}}