v-material-checkbox
v1.0.2
Published
Checkbox component for Vue
Downloads
3
Readme
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
| Prop | Type | Default | What For|
|:-:|:-:|:-:|---|
| id
| String
| undefined
| Recommended. input id associated with label |
| value
| String
| undefined
| Value for input, without it checkbox works as true/false
|
| color
| String
| undefined
| Pass the color string to change bg-color of checkbox |
| checked
| Boolean
| false
| is checked by default? |
| name
| String
| undefined
| Name for input |
| required
| Boolean
| false
| HTML required attr |
| disabled
| Boolean
| false
| HTML disabled attr |
todo
- ~~ripple effect~~