Skip to content
This repository has been archived by the owner. It is now read-only.
Float label pattern for Vue.js
Branch: master
Clone or download
Latest commit 0970eff Dec 25, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components Rename `always` to `fixed`, add test and docs Feb 24, 2018
demo Rename `always` to `fixed`, add test and docs Feb 24, 2018
dist
test
.babelrc Tests Feb 24, 2017
.eslintrc Set up linters Feb 23, 2017
.gitignore Initial setup Feb 23, 2017
.stylelintrc
LICENSE Initial commit Feb 23, 2017
README.md Update README Dec 24, 2018
package.json v1.6.1 Feb 24, 2018
vue-float-label.js
webpack.dist.config.js
yarn.lock Provide compiled version for distribution Apr 3, 2017

README.md

vue-float-label

Float label pattern for Vue.js. Cross-browser compatible and easy to customize with CSS.

intro

<float-label>
  <input type="text" placeholder="Label">
</float-label>

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():

import Vue from "vue";
import VueFloatLabel from "vue-float-label";

Vue.use(VueFloatLabel);

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:

<div id="root"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
<script src="//unpkg.com/vue-float-label"></script>
<script>
  new Vue({
    el: '#root',
    template: '<float-label>...</float-label>'
  })
</script>

Usage

Wrap input, textarea or select with <float-label>:

<float-label>
  <input type="email" placeholder="E-mail">
</float-label>

<float-label>
  <textarea placeholder="Comment"></textarea>
</float-label>

<float-label :dispatch="false">
  <select>
    <option disabled selected>Framework</option>
    <option>Vue</option>
    <option>React</option>
    <option>Angular</option>
    <option>Ember</option>
  </select>
</float-label>

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:

example

.vfl-label {
  text-transform: uppercase;
}

.vfl-label-on-input {
  top: -1em;
}

.vfl-label-on-focus {
  color: #ff851b;
}

.vfl-label + input {
  padding-left: 0;
  font-size: 100%;
  border: 0;
  border-bottom: 2px solid #aaa;
  transition: border 0.2s;
}

.vfl-label-on-focus + input {
  border-bottom: 2px solid #ff851b;
}

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:

<float-label label="Last name">
  <input type="text" placeholder="Surname">
</float-label>
<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

  1. Clone the repository:

    $ git clone git@github.com:bkzl/vue-float-label.git
  2. Install dependencies:

    $ yarn install
  3. Start development:

    $ yarn start

Code is open sourced on GitHub. Up to date changelog is available under the releases section.

You can’t perform that action at this time.