pretty-checkbox-vue

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

View demo Download Source

pretty-checkbox-vuex

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

GitHub