@maqe-vue/checkbox-input
The Vue2 component for checkbox-input
See demo on: Storybook
Installation
NPM
Install the npm package.
npm install @maqe-vue/checkbox-input --save
Register the component
import VmqCheckbox from '@maqe-vue/checkbox-input'
import '@maqe-vue/checkbox-input/dist/style.css'
Vue.component('vmq-checkbox', VmqCheckbox)
Usage
Basic
<vmq-checkbox
v-model="checkbox"
label="Label"
/>
Multiple
<vmq-checkbox
v-for="({ id, title }) in fruits"
v-model="input"
:label="title"
:vmq-value="id"
:key="id"
/>
data() {
return {
fruits: [
{ id: 1, title: "Bannan" },
{ id: 2, title: "Orange" },
{ id: 3, title: "Apple" },
],
input: [1, 2]
};
}
API
Props
Name | Type | Description | default |
---|---|---|---|
v-model |
bind |
||
labele |
string |
||
disabled |
boolean |
false |
|
containerClass |
string |
Event
Name | Type | Description | default |
---|---|---|---|
change(value, event) |
function |
Invoked when input changes |
Style
Custom Style
Custom style with css variable
<vmq-checkbox
v-model="checkbox"
label="Label"
/>
// for example to set as a global
<style>
:root {
--vmq-checkbox-color: tan;
--vmq-checkbox-label-color: black;
}
</style>