1.0.2 • Published 5 years ago

v-material-checkbox v1.0.2

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

Material design checkbox component for Vue

Demo ✅

Here is demo with all features

Use ❓

With npm

  • Install plugin
npm install vue-material-checkbox --save
  • Import to the app and add to the Vue
import Checkbox from 'vue-material-checkbox'
Vue.use(Checkbox)

Alternatively if component used with server-side-rendering Then import as follows below:

import Checkbox from '../node_modules/vue-material-checkbox/src/main'
// assuming  that you're one level higher than root folder where node modules is.
Vue.use(Checkbox)

In this case you will have to install stylus and stylus-loader to parse styles of component.

  • Use it as component:
<checkbox id="mycheck1" v-model="someVar">My Checkbox</checkbox>

Component 💎

There is autogenerated id for label and checkbox, but you can specify it yourself.

You can specify label for checkbox inside checkbox tag:

<checkbox id="mycheck1" v-model="someVar"> ThisIsLabel </checkbox>

You can set custom color for background of checkbox:

<checkbox id="mycheck1" v-model="someVar" color="#f50057"> ThisIsLabel </checkbox>

Complete props table

PropTypeDefaultWhat For
idStringundefinedRecommended. input id associated with label
valueStringundefinedValue for input, without it checkbox works as true/false
colorStringundefinedPass the color string to change bg-color of checkbox
checkedBooleanfalseis checked by default?
nameStringundefinedName for input
requiredBooleanfalseHTML required attr
disabledBooleanfalseHTML disabled attr

todo

  • ripple effect
1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago