vue-enhanced-check v1.5.5
vue-enhanced-check
Enhanced checkboxes /radio input, component for vue 2+.
Note that unicode is used for 'icons'. Therefore design can change according to your browser. It is still possible to override CSS style with '!important' instruction (checked and hover styles)
- Issue with ES2015 -> switch away in version 1.4
- Issue with bootstrap 3.3 on toggle component -> style fix in version 1.5
Based on first enhancedCheck project (CSS/JS)
Global use
- npm install
npm install --save vue-enhanced-check
- import components
import { EnhancedCheck, EnhancedCheckGroup, EnhancedCheckRadio, EnhancedToggle } from 'vue-enhanced-check'
or only one according to your needs
import { EnhancedCheck } from 'vue-enhanced-check'
- declare use or imported components in your vue script
export default {
components: { EnhancedCheck, EnhancedCheckGroup, EnhancedCheckRadio, EnhancedToggle },
methods: ...
}
- Use components as described below
Components
Checkbox
Label is prefixed by 'check' icon
<enhanced-check label="Checkbox"></enhanced-check>
<enhanced-check :label="sc_label" :subClass="sc_subclass"
v-model="sc_model" :disabled="sc_disabled"
:rounded="sc_rounded" :animate="sc_animate"
id="enhancedCheck" name="" value="">
</enhanced-check>
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 |
subClass | 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
<enhanced-check-group :label="['First', 'Second', 'Third']"></enhanced-check-group>
<enhanced-check-group :label="['First', 'Second', 'Third']"
:subClass="gc_subclass" v-model="gc_model"
:disabled="gc_disabled" :rounded="gc_rounded"
:animate="gc_animate" :inline="gc_inline"
:combine="gc_combine"
:value="[gc_val1, gc_val2, gc_val3]"
id="enhancedCheckGroup" name="">
</enhanced-check-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 |
subClass | 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
<enhanced-check-radio :label="['Element A', 'Element B', 'Element C']"></enhanced-check-radio>
<enhanced-check-radio :label="['Element A', 'Element B', 'Element C']"
name="radiotest" :subClass="rc_subclass"
v-model="rc_model" :disabled="rc_disabled"
:rounded="rc_rounded" :animate="rc_animate"
:inline="rc_inline" id="enhancedCheckRadio"
:value="[rc_val1, rc_val2, rc_val3]">
</enhanced-check-radio>
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 |
subClass | 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
<enhanced-toggle></enhanced-check>
<enhanced-toggle :labelOn="tc_labelOn" :labelOff="tc_labelOff"
:styleOn="tc_styleOn" :styleOff="tc_styleOff"
v-model="tc_model"
:disabled="tc_disabled" :rounded="tc_rounded"
id="enhancedToggle" name="">
</enhanced-toggle>
Prop | Type | Note |
---|---|---|
labelOn | String | Label display for 'on' state (checked). Default is 'On' |
labelOff | String | Label display for 'off' state (unchecked). Default is 'Off' |
styleOn | String | style for 'on' state (checked), see checkbox's subclass. Default is primary |
styleOff | 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
You can define your own check color by adding a specific style
For example, let's define a 'custom' sub class.
<enhanced-check label="Custom" subClass="custom"></enhanced-check>
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: $color;
color: white;
}
&:not(:checked) + label:hover {
border: 1px solid $color;
}
&:checked:disabled + label:before {
background: $color-disabled;
}
&:not(:checked):disabled + label:hover {
border: 1px solid $color-disabled;
}
}
}
Contribution
- Fork the repository
- Run
npm install
- You can run
npm run dev
, site is at http://localhost:8081. - Do your stuff
- When you're done, run
npm run build
command and commit your work for a pull request.