@maqe-vue/maqe-vue-checkbox-input v1.0.1

@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

Event

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>