https://github.com/Keiwen/vue-enhancedCheck
enhanced-check component for vue 2
https://github.com/Keiwen/vue-enhancedCheck
Last synced: 8 months ago
JSON representation
enhanced-check component for vue 2
- Host: GitHub
- URL: https://github.com/Keiwen/vue-enhancedCheck
- Owner: Keiwen
- Created: 2017-07-24T13:47:02.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T16:09:15.000Z (almost 3 years ago)
- Last Synced: 2024-04-14T13:11:02.623Z (over 1 year ago)
- Language: Vue
- Size: 1.96 MB
- Stars: 17
- Watchers: 2
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-zh - Vue增强检查 - 用于重新设计/标记复选框/收音机的Vue组件,包括切换/切换按钮. (UI组件 / 形成)
- awesome-vue - vue-enhanced-check - enhanced-check component for vue 2 ` 📝 6 months ago` (UI Components [🔝](#readme))
- awesome-vue - vue-enhanced-check - Vue component to redesign/labelize checkbox/radio, including toggle/switch button. (Components & Libraries / UI Components)
- awesome-vue - vue-enhanced-check ★8 - Vue component to redesign/labelize checkbox/radio, including toggle/switch button. (UI Components / Form)
- awesome-vue - vue-enhanced-check - Vue component to redesign/labelize checkbox/radio, including toggle/switch button. (UI Components / Form)
README
# vue-enhanced-check
[](https://www.npmjs.com/package/vue-enhanced-check)
[](https://www.npmjs.com/package/vue-enhanced-check)
[](https://www.npmjs.com/package/vue-enhanced-check)
Enhanced checkboxes / radio input, component for vue 3. For vue 2, please check 1.5.X releases.
[Live demo here](https://keiwen.github.io/vue-enhancedCheck/)
*Note that unicode is used for 'icons'. Therefore design can change according to your browser. It is still possible to override CSS style (checked and hover styles)*
> Based on first [enhancedCheck project](https://github.com/Keiwen/enhancedCheck) (CSS/JS)
## Global use
- npm install in console
```
npm install --save vue-enhanced-check
```
- import components in your code
```
import { EnhancedCheck, EnhancedCheckGroup, EnhancedCheckRadio, EnhancedToggle } from 'vue-enhanced-check'
```
or only one according to your needs
```
import { EnhancedCheck } from 'vue-enhanced-check'
```
you may also import them globally in your app
```
import { createApp } from "vue";
import vueEnhancedCheck from "vue-enhanced-check";
createApp(App).use(vueEnhancedCheck);
```
- Use components as described below
## Components
### Checkbox
Label is prefixed by 'check' icon
```
```
```
```
| Prop | Type | Note |
|:------------| :--- | ---: |
| `label` | `String` | **REQUIRED**: by design, label is a main part of the display |
| `id` | `String` | id of input and associated label. |
| `name` | `String` | name of classic input. Empty by default |
| `value` | `String` | value of classic input. Empty by default |
| `sub-class` | `String` | Same colors than bootstrap style, possible values are 'default', 'primary', 'success', 'warning', 'danger' |
| `disabled` | `Boolean` | False by default. Prevent clic action but not direct model change |
| `rounded` | `Boolean` | False by default. Rounded border style |
| `animate` | `Boolean` | False by default. Add a transition on style |
As a classic simple checkbox, model bound to check state: true or false
### Checkbox group
```
```
```
```
| Prop | Type | Note |
|:------------| :--- | ---: |
| `label` | `Array` | **REQUIRED** |
| `value` | `Array` | Value for each input. By default equal to label |
| `id` | `String`/`Array` | id of input and associated label. If string provided, each element id will have a counter as suffix |
| `name` | `String`/`Array` | name of classic input. Use array to specify different names |
| `sub-class` | `String` | *Same than checkbox* |
| `disabled` | `Boolean` | *Same than checkbox* |
| `rounded` | `Boolean` | *Same than checkbox* |
| `animate` | `Boolean` | *Same than checkbox* |
| `inline` | `Boolean` | False by default. Turn all input as inline-block |
| `combine` | `Boolean` | False by default. Turn 'check' icon into 'plus' icon |
As classic multiple checkboxes, model bound to array of value from checked input
### Radio
Label is prefixed by 'dot' icon
```
```
```
```
| Prop | Type | Note |
|:------------| :--- | ---: |
| `label` | `Array` | **REQUIRED** |
| `name` | `String` | name of classic input. |
| `id` | `String`/`Array` | id of input and associated label. If string provided, each element id will have a counter as suffix |
| `value` | `Array` | Value for each input. By default equal to label |
| `sub-class` | `String` | *Same than checkbox* |
| `disabled` | `Boolean` | *Same than checkbox* |
| `rounded` | `Boolean` | *Same than checkbox* |
| `animate` | `Boolean` | *Same than checkbox* |
| `inline` | `Boolean` | *Same than checkbox group* |
As classic radio buttons, model bound to value from checked input
### Toggle button
Checkbox is replaced by 2 switching labels, for on and off states
```
```
```
```
| Prop | Type | Note |
|:------------| :--- | ---: |
| `label-on` | `String` | Label display for 'on' state (checked). Default is 'On' |
| `label-off` | `String` | Label display for 'off' state (unchecked). Default is 'Off' |
| `style-on` | `String` | style for 'on' state (checked), see checkbox's subclass. Default is primary |
| `style-off` | `String` | style for 'off' state (unchecked), see checkbox's subclass. Default is default |
| `id` | `String` | id of input and associated label. |
| `name` | `String` | *Same than checkbox* |
| `value` | `String` | *Same than checkbox* |
| `disabled` | `Boolean` | *Same than checkbox* |
| `rounded` | `Boolean` | *Same than checkbox* |
As a classic simple checkbox, model bound to check state: true or false
## Override style
### Base variable override usecase
You can override base CSS variable used, like colors or icons.
After importing this library style, override CSS variable in root.
For example, the following CSS will:
- use star icons instead of checkmarks for checkboxes
- set primary color to fuchsia and primary borders to rosybrown
```
:root {
--enhanced-check-icon-checkbox: '\2606';
--enhanced-check-color-primary: fuchsia;
--enhanced-check-color-dark-primary: rosybrown;
}
```
Refer to `src/styles/variables.css` for the full list of variable used
in this library that you can override.
### New style usecase
You can also define your own check class by adding specific style
For example, let's define a 'custom' sub class.
```
```
Checkbox will get the class 'enhancedCheck-custom', that you can use in your CSS.
Simple override for checkboxes:
```
.enhancedCheck.enhancedCheck-custom input[type="checkbox"]:checked + label:before {
background: fuchsia;
color: white;
}
.enhancedCheck.enhancedCheck-custom input[type="checkbox"]:not(:checked) + label:hover {
border-color: fuchsia;
}
```
Full less sample:
```
.enhancedCheck.enhancedCheck-custom {
input[type="radio"], input[type="checkbox"] {
&:checked + label:before {
background: fuchsia;
color: white;
}
&:not(:checked) + label:hover {
border: 1px solid fuchsia;
}
&:checked:disabled + label:before {
background: rosybrown;
}
&:not(:checked):disabled + label:hover {
border: 1px solid rosybrown;
}
}
}
```
## Contribution
This library is managed with vue-CLI
- Fork the repository
- Run `npm install`
- You can run `npm run serve`, the script will start the mini demo application
- Do your stuff
- When you're done, run `npm run build` command and commit your work for a pull request.