Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Vue.js
Demo and documentation
Installation
npm i --save-dev pretty-checkbox-vue
Browser
Include the script file, then install the component with Vue.use(PrettyCheckbox);
e.g.:
Module
; Vue;
Or
;;; Vue;Vue;Vue;
Usage
Once installed, it can be used in a template as simply as:
checkradio <!-- Or it can be used just like input --> checkradio
Properties
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 |
Slots
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.