vue-enhanced-check
v1.5.5
Published
enhanced-check component for vue 2
Downloads
98
Readme
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.