Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/keiwen/vue-enhancedCheck below:

Keiwen/vue-enhancedCheck: enhanced-check component for vueJS

Enhanced checkboxes / radio input, component for vue 3. For vue 2, please check 1.5.X releases.

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 (checked and hover styles)

Based on first enhancedCheck project (CSS/JS)

• 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

Label is prefixed by 'check' icon

<enhanced-check label="Checkbox"></enhanced-check>

<enhanced-check :label="sc_label" :sub-class="sc_subclass"
                v-model="sc_model" :disabled="sc_disabled"
                :rounded="sc_rounded" :animate="sc_animate"
                id="enhancedCheck" name="" value="">

</enhanced-check>

As a classic simple checkbox, model bound to check state: true or false

<enhanced-check-group :label="['First', 'Second', 'Third']"></enhanced-check-group>

<enhanced-check-group :label="['First', 'Second', 'Third']"
                      :sub-class="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>

As classic multiple checkboxes, model bound to array of value from checked input

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" :sub-class="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>

As classic radio buttons, model bound to value from checked input

Checkbox is replaced by 2 switching labels, for on and off states

<enhanced-toggle></enhanced-check>

<enhanced-toggle :label-cn="tc_labelOn" :label-off="tc_labelOff"
                 :style-on="tc_styleOn" :style-off="tc_styleOff"
                 v-model="tc_model"
                 :disabled="tc_disabled" :rounded="tc_rounded"
                 id="enhancedToggle" name="">
</enhanced-toggle>

As a classic simple checkbox, model bound to check state: true or false

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.

You can also define your own check class by adding specific style

For example, let's define a 'custom' sub class.

<enhanced-check label="Custom" sub-class="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: 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;
    }
  }
}

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4