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 🐜 or have a feature suggestion, feel free to create an issue on Github.

License

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