Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hamed-ehtesham/pretty-checkbox-vue
Quickly integrate pretty checkbox components with Vue.js
https://github.com/hamed-ehtesham/pretty-checkbox-vue
animation bootstrap checkbox css html js radio-buttons scss vuejs2
Last synced: 4 days ago
JSON representation
Quickly integrate pretty checkbox components with Vue.js
- Host: GitHub
- URL: https://github.com/hamed-ehtesham/pretty-checkbox-vue
- Owner: hamed-ehtesham
- License: mit
- Created: 2017-12-25T23:21:45.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T19:48:11.000Z (about 2 years ago)
- Last Synced: 2024-04-14T13:11:08.143Z (8 months ago)
- Topics: animation, bootstrap, checkbox, css, html, js, radio-buttons, scss, vuejs2
- Language: Vue
- Size: 1.14 MB
- Stars: 261
- Watchers: 5
- Forks: 31
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - pretty-checkbox-vue - ehtesham | 261 | (Vue)
README
Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Vue.js
## Installation
```js
npm i --save-dev pretty-checkbox-vue
```
### Browser
Include the script file, then install the component with `Vue.use(PrettyCheckbox);` e.g.:
```html
Vue.use(PrettyCheckbox);
```
### Module
```js
import PrettyCheckbox from 'pretty-checkbox-vue';
Vue.use(PrettyCheckbox);
```
Or
```js
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:
```html
check
radio
check
radio
```
### 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](https://github.com/hamed-ehtesham/pretty-checkbox-vue/issues) on Github.
# License
Released under The MIT [License](https://github.com/hamed-ehtesham/pretty-checkbox-vue/blob/master/LICENSE). Copyright (c) hamed-ehtesham.