vue-float-label
Float label pattern for Vue.js. Cross-browser compatible and easy to customize with CSS.
Installation
yarn / npm
Install package using yarn
or npm
:
$ yarn add vue-float-label # or $ npm install --save vue-float-label
Global
Load the plugin by calling Vue.use()
:
Vue
Now you have access in your templates to the <float-label>
component.
Local
You may prefer to explicitly import the plugin and use it inside your components:
<template> <float-label> ... </float-label></template> <script>import FloatLabel from 'vue-float-label/components/FloatLabel' export default { components: { FloatLabel }}</script>
CDN
Load the script file from CDN:
Usage
Wrap input, textarea or select with <float-label>
:
Framework Vue React Angular Ember
See more examples at Demo.vue.
Customization
Design
Style .vfl-label
, .vfl-label-on-input
and .vfl-label-on-focus
to meet your design requirements:
Props
Set :on
prop to add an additional condition for label activation:
<template> <float-label :on="isActive"> <input type="text" placeholder="Inactive"> </float-label></template> <script>export default { computed: { isActive () { return false } }, components: { FloatLabel }}</script>
Set :label
prop to override placeholder
attribute for input/textarea or
option[disabled][selected]
for select:
<template> <float-label label="Version"> <select v-model="version"> <option v-for="option in options" :value="option.value"> {{ option.text }} </option> </select> </float-label></template> <script>export default { data () { return { version: 'beta', options: [ { value: 'alpha', text: 'Alpha' }, { value: 'beta', text: 'Beta' }, { value: 'stable', text: 'Stable' }, ] } }, components: { FloatLabel }}</script>
Set :fixed
to true
to make label permanently active:
<template> <float-label fixed> <input type="text" placeholder="Fixed"> </float-label></template>
Set :dispatch
to false
to disable triggering input
event
once the component is mounted:
By default it's set to true to activate label when form element has value.
<template> <float-label :dispatch="false"> <input type="email" placeholder="Email" v-model="email"> </float-label></template> <script>export default { data () { return { email: 'john@example.com' } }, components: { FloatLabel }}</script>
Development
-
Clone the repository:
$ git clone git@github.com:bkzl/vue-float-label.git -
Install dependencies:
$ yarn install -
Start development:
$ yarn start
Code is open sourced on GitHub. Up to date changelog is available under the releases section.
I appreciate any comments, feedback, and information about potential issues. Have you experienced a bug or noticed a mistake in documentation? Please add a new issue. Thanks!