⭐️Vue material checkbox⭐️
#### Material design checkbox component for Vue
# Demo ✅
[Here is demo with all features](https://xrei.github.io/vue-material-checkbox/)
## 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)
```javascript
// inside vue SFC
import Checkbox from 'vue-material-checkbox'
export default {
components: {Checkbox}
}
```
- Import to the app and add to the Vue (not recommended)
```javascript
import { globalCheckbox } from 'vue-material-checkbox'
Vue.use(globalCheckbox)
```
Alternatively if component used with server-side-rendering
Then import as follows below:
```javascript
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:
```html
My 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:
```html
ThisIsLabel
```
You can set custom color for background of checkbox:
```html
ThisIsLabel
```
You can set size of the box and label font size in pixels:
```html
ThisIsLabel
```
## 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 |