Skip to content

xrei/vue-material-checkbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⭐️Vue material checkbox⭐️

NPM version

Material design checkbox component for Vue

Demo ✅

Here is demo with all features

Breaking changes from v1

Rename plugin default name from checkbox to Checkbox

Use ❓

With npm

  • Install plugin
npm install vue-material-checkbox --save
  • Import to the component (recommended way)
// inside vue SFC
import Checkbox from 'vue-material-checkbox'
export default {
  components: {Checkbox}
}
  • Import to the app and add to the Vue (not recommended)
import { globalCheckbox } from 'vue-material-checkbox'
Vue.use(globalCheckbox)

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

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

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" :value="42">My Checkbox</Checkbox>

This component must be used with v-model to work properly. But you can pass any value to :value and get it from event change from second argument.

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>

You can set size of the box and label font size in pixels:

<Checkbox id="mycheck1" v-model="someVar" :size="32" fontSize="24"> ThisIsLabel </Checkbox>

Complete props table

Prop Type Default What For
id String undefined Recommended. input id associated with label
model Boolean or Array undefined Value for v-model
value any 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
size Number undefined Size of the box in px
fontSize Number undefined Size of the label font in px