Vue simple floating labels

Simple floating labels as a Vue component without jQuery.

Check out the demo

Getting started

Pull in the package:
``
yarn add vue-simple-floating-labels
`

Import the component:
`
import FloatingLabel from 'vue-simple-floating-labels'
export default {
components: {
FloatingLabel
}
}
`
Use in your template:
`
:config="{label: 'Example'}">


`

Config

$3

Input field should have a clear button.

$3

The input height.

$3

Input field should have a line below it (for accessibility reasons)

$3

Turn scale animation on or off

$3

Whether or not to apply the error class

$3

Set the top and left property of the label.

Defaults:
`
{
top: 10,
left: 8
}
`


$3

Custom classes.

Defaults:
`
{
error: 'has-error'
}
`

$3

Specify the focusColor, lineColor and blurredColor.

Defaults:
`
{
focusColor: '#128CED',
errorColor: '#ff0000',
lineColor: '#128CED',
blurredColor: 'rgba(3, 23, 40, 0.34)'
}
`

Events


`
clear: When the user presses the clear button (when using v-model you should clear the value)
focus: On focus
blur: On blur
input: On input
``

TODO

* Textarea
* Select

Credit

* Inspiration: Pen by Oscar Waczynski