pcv

pretty-checkbox-vue

Quickly integrate pretty checkbox components with Vue.js

Showing:

Popularity

Downloads/wk

6.2K

GitHub Stars

252

Maintenance

Last Commit

3yrs ago

Contributors

2

Package

Dependencies

1

Size (min+gzip)

2.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme


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

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial