3.2.1 • Published 1 year ago

@gavant/ember-floating-labels v3.2.1

Weekly downloads
58
License
MIT
Repository
github
Last release
1 year ago

@gavant/ember-floating-labels

Animated floating placeholder form labels for Ember apps.

Demo: https://gavant.github.io/ember-floating-labels/

Compatibility

  • Ember.js v3.24 or above
  • Ember CLI v3.24 or above
  • Node.js v12 or above

Installation

ember install @gavant/ember-floating-labels

To use the addon styles, you must use SASS:

ember install ember-cli-sass

(Upon addon installation, an import statement will be added to your app.scss)

Usage

An example <FlInput> usage, with all available arguments specified. Only @value and @placeholder are required, and you may pass in normal HTML attributes as well which will be applied to the <input> element (e.g. type="email", or disabled={{true}}, class="some-custom-input-class" etc).

@inset={{true}} enables an alternate styling, where the floating label will remain constrained inside of the input element, instead of overlaid on its top border.

<FlInput
    @value={{string}}
    @placeholder={{string}}
    @containerClass={{string}}
    @inputBaseClass={{string}}
    @inset={{boolean}}
/>

{{! block form is supported too }}
<FlInput @value={{this.someValue}} @placeholder='Block input'>
    <Input @value={{this.someValue}} placeholder='Look ma, block content!' />
</FlInput>

NOTE: When using block form, make sure to still pass in a @value, so the label knows when to remain "floated".

There are also floating label components for <select> & <textarea> fields:

<FlSelect
    @options={{array<object>}}
    @value={{string}}
    @valuePath={{string}}
    @labelPath={{string}}
    @emptyOptionText={{string}}
    @allowClear={{boolean}}
    @onChange={{function}}
    @placeholder={{string}}
    @containerClass={{string}}
    @inputBaseClass={{string}}
    @inset={{boolean}}
/>
<FlTextarea
    @value={{string}}
    @placeholder={{string}}
    @containerClass={{string}}
    @inputBaseClass={{string}}
    @inset={{boolean}}
/>

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

3.2.1

1 year ago

3.2.0

1 year ago

3.1.0

1 year ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

2.1.1

2 years ago

2.1.0

2 years ago

2.0.0

2 years ago

1.1.0

3 years ago

1.0.2

3 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.3.8

5 years ago

0.3.7

5 years ago

0.3.6

5 years ago