Quickly integrate pretty checkbox components with Vue.js
Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Vue.js.
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.:
<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/pretty-checkbox-vue/dist/pretty-checkbox-vue.min.js"></script>
<script type="text/javascript">
Vue.use(PrettyCheckbox);
</script>
Module
import PrettyCheckbox from 'pretty-checkbox-vue';
Vue.use(PrettyCheckbox);
Or
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:
<p-check name="check" color="success" v-model="check">check</p-check>
<p-radio name="radio" color="info" v-model="radio">radio</p-radio>
<!-- Or it can be used just like input -->
<p-input type="checkbox" name="check" color="success" v-model="check">check</p-input>
<p-input type="radio" name="radio" color="info" v-model="radio">radio</p-input>
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
Github Repository
Tags: #VueJs #Checkboxes