1.0.4 • Published 4 years ago
vuetify-weight-input v1.0.4
Vuetify Weight Input
Nice Weight input build by vue & vuetify
Table of Contents
Installation
- install
vuetify-weight-input
npm install vuetify-weight-input
Usage
import and use component
View all available options in Props.
import and use the vuetify-weight-input
component:
<template>
<vuetify-weight-input outlined v-model="weight"></vuetify-weight-input>
<template>
<script>
import VWeightInput from 'vuetify-weight-input';
export default {
components: {VWeightInput},
data() {
return {
weight: null
}
},
};
</script>
Props
Property | Type | Default value | Description |
---|---|---|---|
label | String | undefined | add label to input |
unit | String | 'kg' | unit of weight |
placeholder | String | undefined | add placeholder to input |
outlined | Boolean | false | apply vuetify outlined style |
dense | Boolean | false | add vuetify dense prop to input |
suffix | Boolean | false | add suffix to input contain unit |
disabled | Boolean | false | add vuetify disabled prop to input |
show-shortcuts | Boolean | true | add additional buttons to menu to quck add weight (1/2, 1/4 ... etc) |
width | Number | false | width of input (not menu) |
max-width | Number | false | width of input (not menu) |
empty-error | Boolean | false | Puts the input in an error state if input is empty or equals to 0 |
save-text | String | 'Save' | save button text |
cancel-text | String | 'Cancel' | cancel button text |
eighth-text | String | '1/8' | 1/8 button text |
quarter-text | String | '1/4' | 1/4 button text |
half-text | String | '1/2' | 1/2 button text |
plus-quarter-color | String | 'secondary' | color of +0.25 button |
Credits
made with ❤ by Ebrahim Maher.