Skip to content

hamed-ehtesham/pretty-checkbox-vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


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


Github Release Licence

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.