3.1.0 • Published 10 months ago
@odyzeo/form-checkbox v3.1.0
@odyzeo/form-checkbox
Simple input checkbox Vue.js component.
Demo
Installation
npm
npm install --save @odyzeo/form-checkbox
yarn
yarn add @odyzeo/form-checkbox
Import component in your where you want to use it and register it:
import FormCheckbox from '@odyzeo/form-checkbox';
export default {
components: {
FormCheckbox,
},
}
Import styles or make your own.
import '@odyzeo/form-checkbox/dist/form-checkbox.css';
Usage
<template>
<form-checkbox
v-for="(checkbox, key) in checkboxes"
:input="checkbox"
:key="`${checkbox.name}-${checkbox.value}-${key}`"
v-model="checkbox.value"
:form-errors="formErrors[checkbox.name]"
></form-checkbox>
</template>
<script>
import FormCheckbox from '@odyzeo/form-checkbox'
export default {
name: 'App',
components: {
FormCheckbox,
},
data() {
return {
formErrors: {},
checkboxes: [
{
name: 'checkbox_ios',
label: ' <strong>iOS</strong>',
value: true,
html: true,
},
{
name: 'checkbox_android',
label: 'Android',
},
{
name: 'checkbox_windows',
label: 'Windows',
value: false,
},
{
name: 'checkbox_ie',
label: 'IE',
value: false,
disabled: true,
},
{
name: 'checkbox_zeo',
label: 'Zeo',
value: true,
readonly: true,
},
],
};
},
};
</script>
Props
input - required
Property name | Type | Default value | Description |
---|---|---|---|
name | string | Input name attribute | |
label | string | '' | Label name for checkbox |
html | boolean | false | Display label with v-html |
disabled | boolean | | Add disabled attribute to input | |
readonly | boolean | | Add readonly attribute to input |
value {string} - optional
This is the initial value of the form checkbox.
trans {Function} - optional
Custom function to translate or modify input label.
trueValue {string} - optional
Value for checked checkbox. Default: yes
.
falseValue {string} - optional
Value for unchecked checkbox. Default: null
.
formErrors {array} - optional
Array of errors to display.
Events
Component emits 'input' event with value of the element
Slots
Name | Description |
---|---|
label | Show custom content |
Development
npm run serve
or
yarn serve
3.0.3
10 months ago
3.0.2
10 months ago
3.1.0
10 months ago
3.0.1
2 years ago
3.0.0
2 years ago
2.0.3
3 years ago
2.0.2
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.5.1
4 years ago
1.5.0
4 years ago
1.4.2
5 years ago
1.4.1
5 years ago
1.4.0
5 years ago
1.3.0
5 years ago
1.2.0
5 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.0
5 years ago