Pretty-checkbox-vue NPM

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);

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