Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bkzl/vue-float-label
Float label pattern
https://github.com/bkzl/vue-float-label
float label vue vuejs
Last synced: 5 days ago
JSON representation
Float label pattern
- Host: GitHub
- URL: https://github.com/bkzl/vue-float-label
- Owner: bartkozal
- License: mit
- Archived: true
- Created: 2017-02-23T16:41:05.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-24T23:31:01.000Z (almost 6 years ago)
- Last Synced: 2024-10-29T10:45:18.618Z (10 days ago)
- Topics: float, label, vue, vuejs
- Language: JavaScript
- Homepage:
- Size: 423 KB
- Stars: 176
- Watchers: 4
- Forks: 30
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-vue - vue-float-label - VueJS浮动标签模式 (UI组件)
- awesome - vue-float-label - VueJS浮动标签模式 (UI组件)
- awesome-vue - vue-float-label - float-label?style=social) - VueJS浮动标签模式 (UI组件)
README
# vue-float-label
Float label pattern for Vue.js. Cross-browser compatible and easy to customize
with CSS.
```html
```
## Installation
### yarn / npm
Install package using `yarn` or `npm`:
```sh
$ yarn add vue-float-label
# or
$ npm install --save vue-float-label
```
#### Global
Load the plugin by calling `Vue.use()`:
```js
import Vue from "vue";
import VueFloatLabel from "vue-float-label";
Vue.use(VueFloatLabel);
```
Now you have access in your templates to the `` component.
#### Local
You may prefer to explicitly import the plugin and use it inside your components:
```vue
...
import FloatLabel from "vue-float-label/components/FloatLabel";
export default {
components: {
FloatLabel
}
};
```
### CDN
Load the script file from CDN:
```html
new Vue({
el: '#root',
template: '<float-label>...</float-label>'
})
```
## Usage
Wrap input, textarea or select with ``:
```html
Framework
Vue
React
Angular
Ember
```
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:
```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
export default {
computed: {
isActive() {
return false;
}
},
components: {
FloatLabel
}
};
```
Set `:label` prop to override `placeholder` attribute for input/textarea or
`option[disabled][selected]` for select:
```html
```
```vue
{{ option.text }}
export default {
data() {
return {
version: "beta",
options: [
{ value: "alpha", text: "Alpha" },
{ value: "beta", text: "Beta" },
{ value: "stable", text: "Stable" }
]
};
},
components: {
FloatLabel
}
};
```
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
export default {
data() {
return {
email: "[email protected]"
};
},
components: {
FloatLabel
}
};
```
## Development
1. Clone the repository:
```sh
$ git clone [email protected]: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).