Home

Awesome

<p align="center"> <a href="https://hamed-ehtesham.github.io/pretty-checkbox-vue/"> <img src="https://raw.githubusercontent.com/hamed-ehtesham/pretty-checkbox-vue/master/banner.png" width="300px"> </a> <br> Quickly integrate <a href="https://lokesh-coder.github.io/pretty-checkbox/">pretty checkbox</a> Components (checkbox, switch, radio button) with <a href="https://vuejs.org">Vue.js</a> <br> <br> <a href="https://lokesh-coder.github.io/pretty-checkbox/"> <img alt="" src="https://img.shields.io/badge/%20pretty--checkbox-3.x-green.svg?style=flat-square&colorA=8033b0&colorB=75b7dd"> </a> <a href="https://vuejs.org"> <img alt="" src="https://img.shields.io/badge/vue.js-^2.2.0-green.svg?style=flat-square&colorA=35495e&colorB=41b883"> </a> <br> <a href="https://github.com/hamed-ehtesham/pretty-checkbox-vue/releases"> <img src="https://img.shields.io/github/release/hamed-ehtesham/pretty-checkbox-vue.svg?style=flat-square&colorB=75b7dd" alt="Github Release"> </a> <a href="https://github.com/hamed-ehtesham/pretty-checkbox-vue/blob/master/LICENSE"> <img src="https://img.shields.io/npm/l/pretty-checkbox.svg?style=flat-square&colorB=41b883" alt="Licence"> </a> <a href="https://www.npmjs.com/package/pretty-checkbox-vue"> <img alt="" src="https://img.shields.io/npm/dt/pretty-checkbox-vue.svg?style=flat-square"> </a> <a href="https://www.npmjs.com/package/pretty-checkbox-vue"> <img alt="" src="https://img.shields.io/npm/dm/pretty-checkbox-vue.svg?style=flat-square"> </a> </p> <div class="highlight highlight-source-shell"> <pre> <div align="center"><strong>Demo and documentation</strong></div> <div align="center"><a align="center" href="https://hamed-ehtesham.github.io/pretty-checkbox-vue/">https://hamed-ehtesham.github.io/pretty-checkbox-vue/</a></div> </pre> </div>

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

PropertyTypeDefault Value
typeStringcheckbox (checkbox & input) or radio (radio)
nameString
valueAny
classStringp-default (checkbox & input) or p-default p-round (radio)
true-valueBoolean or Stringtrue
false-valueBoolean or Stringfalse
checkedBooleanfalse
disabledBooleanfalse
requiredBooleanfalse
indeterminateBooleanfalse
colorString
off-colorString
hover-colorString
indeterminate-colorString
toggleBooleanfalse
hoverBooleanfalse
focusBooleanfalse

Slots

NamePurpose
default (no name)include label in default mode or for "on" state in toggle mode
extrainclude icon or svg or image in default mode or for "on" state in toggle mode
off-labelinclude label for "off" state in toggle mode
off-extrainclude icon or svg or image for "off" state in toggle mode
hover-labelinclude label in hover state
hover-extrainclude icon or svg or image in hover state
indeterminate-labelinclude label in indeterminate state
indeterminate-extrainclude 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.