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


Github Release Licence 

Demo and documentation


https://hamed-ehtesham.github.io/pretty-checkbox-vue/
## Installation ```js npm i --save-dev pretty-checkbox-vue ``` ### Browser Include the script file, then install the component with `Vue.use(PrettyCheckbox);` e.g.: ```html ``` ### Module ```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 ``` ### 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](https://github.com/hamed-ehtesham/pretty-checkbox-vue/issues) on Github. # License Released under The MIT [License](https://github.com/hamed-ehtesham/pretty-checkbox-vue/blob/master/LICENSE). Copyright (c) hamed-ehtesham.