vec

vue-enhanced-check

enhanced-check component for vue 2

Showing:

Popularity

Downloads/wk

34

GitHub Stars

18

Maintenance

Last Commit

1yr ago

Contributors

1

Package

Dependencies

1

License

Type Definitions

Tree-Shakeable

Yes?

Readme

vue-enhanced-check

npm npm

Enhanced checkboxes /radio input, component for vue 2+.

Live demo here

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>
PropTypeNote
labelStringREQUIRED: by design, label is a main part of the display
idStringid of input and associated label.
nameStringname of classic input. Empty by default
valueStringvalue of classic input. Empty by default
subClassStringSame colors than bootstrap style, possible values are 'default', 'primary', 'success', 'warning', 'danger'
disabledBooleanFalse by default. Prevent clic action but not direct model change
roundedBooleanFalse by default. Rounded border style
animateBooleanFalse 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>
PropTypeNote
labelArrayREQUIRED
valueArrayValue for each input. By default equal to label
idString/Arrayid of input and associated label. If string provided, each element id will have a counter as suffix
nameString/Arrayname of classic input. Use array to specify different names
subClassStringSame than checkbox
disabledBooleanSame than checkbox
roundedBooleanSame than checkbox
animateBooleanSame than checkbox
inlineBooleanFalse by default. Turn all input as inline-block
combineBooleanFalse 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>
PropTypeNote
labelArrayREQUIRED
nameStringname of classic input.
idString/Arrayid of input and associated label. If string provided, each element id will have a counter as suffix
valueArrayValue for each input. By default equal to label
subClassStringSame than checkbox
disabledBooleanSame than checkbox
roundedBooleanSame than checkbox
animateBooleanSame than checkbox
inlineBooleanSame 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>
PropTypeNote
labelOnStringLabel display for 'on' state (checked). Default is 'On'
labelOffStringLabel display for 'off' state (unchecked). Default is 'Off'
styleOnStringstyle for 'on' state (checked), see checkbox's subclass. Default is primary
styleOffStringstyle for 'off' state (unchecked), see checkbox's subclass. Default is default
idStringid of input and associated label.
nameStringSame than checkbox
valueStringSame than checkbox
disabledBooleanSame than checkbox
roundedBooleanSame 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.

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