Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Vue.js

Installation

``js
npm i --save-dev pretty-checkbox-vue
`

$3

Include the script file, then install the component with Vue.use(PrettyCheckbox); e.g.:

`html



`

$3

`js
import PrettyCheckbox from 'pretty-checkbox-vue';

Vue.use(PrettyCheckbox);
`

Or

`js
import PrettyInput from 'pretty-checkbox-vue/input';
import PrettyCheck from 'pretty-checkbox-vue/check';
import PrettyRadio from 'pretty-checkbox-vue/radio';

Vue.component('p-input', PrettyInput);
Vue.component('p-check', PrettyCheck);
Vue.component('p-radio', PrettyRadio);
`

Usage

Once installed, it can be used in a template as simply as:

`html
check
radio

check
radio
`




$3


Property | Type | Default Value
------------ | ------------- | -------------
type | String | checkbox (checkbox & input) or radio (radio)
name | String |
value | Any |
class | String | p-default (checkbox & input) or p-default p-round` (radio)
true-value | Boolean or String | true
false-value | Boolean or String | false
checked | Boolean | false
disabled | Boolean | false
required | Boolean | false
indeterminate | Boolean | false
color | String |
off-color | String |
hover-color | String |
indeterminate-color | String |
toggle | Boolean | false
hover | Boolean | false
focus | Boolean | false

$3

Name | Purpose
------------ | -------------
default (no name) | include label in _default_ mode or for "on" state in _toggle_ mode
extra | include icon or svg or image in _default_ mode or for "on" state in _toggle_ mode
off-label | include label for "off" state in _toggle_ mode
off-extra | include icon or svg or image for "off" state in _toggle_ mode
hover-label | include label in _hover_ state
hover-extra | include icon or svg or image in _hover_ state
indeterminate-label | include label in _indeterminate_ state
indeterminate-extra | include icon or svg or image in _indeterminate_ state

If you have discovered a 🐜 or have a feature suggestion, feel free to create an issue on Github.

License

Released under The MIT License. Copyright (c) hamed-ehtesham.