项目作者: bartkozal

项目描述 :
Float label pattern
高级语言: JavaScript
项目地址: git://github.com/bartkozal/vue-float-label.git
创建时间: 2017-02-23T16:41:05Z
项目社区:https://github.com/bartkozal/vue-float-label

开源协议:MIT License

下载


``` See more examples at [Demo.vue](https://github.com/bkzl/vue-float-label/blob/master/demo/Demo.vue). ## Customization ### Design Style `.vfl-label`, `.vfl-label-on-input` and `.vfl-label-on-focus` to meet your design requirements: ![example](https://github.com/bkzl/vue-float-label/raw/master/demo/example.gif) ```css .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: ```vue ``` Set `:label` prop to override `placeholder` attribute for input/textarea or `option[disabled][selected]` for select: ```html ``` ```vue ``` Set `:fixed` to `true` to make label permanently active: ```vue ``` 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._ ```vue ``` ## Development 1. Clone the repository: ```sh $ git clone git@github.com:bkzl/vue-float-label.git ``` 2. Install dependencies: ```sh $ yarn install ``` 3. Start development: ```sh $ yarn start ``` --- Code is open sourced [on GitHub](https://github.com/bkzl/vue-float-label). Up to date changelog is available under [the releases section](https://github.com/bkzl/vue-float-label/releases).

vue-float-label

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

intro

  1. <float-label>
  2. <input type="text" placeholder="Label">
  3. </float-label>

Installation

yarn / npm

Install package using yarn or npm:

  1. $ yarn add vue-float-label
  2. # or
  3. $ npm install --save vue-float-label

Global

Load the plugin by calling Vue.use():

  1. import Vue from "vue";
  2. import VueFloatLabel from "vue-float-label";
  3. 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:

  1. <template>
  2. <float-label>
  3. ...
  4. </float-label>
  5. </template>
  6. <script>
  7. import FloatLabel from "vue-float-label/components/FloatLabel";
  8. export default {
  9. components: {
  10. FloatLabel
  11. }
  12. };
  13. </script>

CDN

Load the script file from CDN:

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

Usage

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

```html