ember-float-label
Animated float labels for your Ember app.
Installation
# From within your ember-cli project
ember install:addon ember-float-label
Usage
In your template:
{{ #float-label }}
{{ input type =' text' value =name placeholder =' Name' }}
{{ /float-label }}
{{ #float-label }}
{{ textarea value =notes placeholder =' Notes' }}
{{ /float-label }}
{{ #float-label }}
{{ view ' select'
prompt =' State'
content =stateOptions
optionValuePath =' content.abbreviation'
optionLabelPath =' content.name'
value =state }}
{{ /float-label }}
Note that input
and textarea
must have a placeholder
while select
must have a prompt
. If you want the float label to be something different than the placeholder/prompt, you can specify it as follows:
{{ #float-label label =' Something Else' }}
{{ input type =' text' value =name placeholder =' Name' }}
{{ /float-label }}
Styling is left completely up to you.