A vue UI component for loading checkbox
npm install vue-loading-checkbox --save Inside your .vue files
<template> <div id="your-component"> <!-- Using Component --> <loading-checkbox :checked="checked" :loading="loading" label="Title of checkbox" @click.native="toggleStatus" /> </div> </template> <script> // Importing Component and style import LoadingCheckbox from 'vue-loading-checkbox' import 'vue-loading-checkbox/dist/LoadingCheckbox.css' export default { name: 'YourComponentName', data() { return { checked: false, loading: false } }, methods: { toggleStatus() { this.loading = true setTimeout(() => { this.loading = false this.checked = !this.checked }, 2000) } }, components: { LoadingCheckbox // Registering Component } } </script>| prop | description | default |
|---|---|---|
borderColor | Color of checkbox border | black |
borderRadius | Border radius of checkbox | 0 |
borderStyle | Style of checkbox border, (solid, dashed, dotted, ...) | solid |
borderWidth | width of checkbox border. You have to insert unit (px,em...) | 1px |
checkColor | Color of check mark | white |
checked | Status of component. can be true(checked) or false(unchecked) | false |
checkedBackgroundColor | Background color of checkbox when status is checked | gray |
checkedBorderColor | Border color of checkbox when status is checked | null (same as borderColor) |
checkedBorderRadius | Border radius of checkbox when status is checked | null (same as borderRadius) |
checkedBorderStyle | Border style of checkbox when status is checked | null (same as borderStyle) |
checkedBorderWidth | Border width of checkbox when status is checked | null (same as borderWidth) |
checkIcon | Custom check mark image (.svg, png, etc). you have to pass it with require function | null A default pure css check |
checkIconPadding | Padding of the given custom check mark image (This will not affect the size) | null |
fontColor | Text color of label | black |
fontSize | Font size of label | null (calculated based on size) |
gap | Gap size between checkbox and its label in px. | null (calculated based on size) |
label | Label of checkbox | null (no label) |
loading | If true component is in loading state. it has a higher priority than checked | false |
loadingBackgroundColor | Background color of checkbox when status is loading | white |
loadingBorderColor | Border color of checkbox when status is loading | null (same as borderColor) |
loadingBorderRadius | Border radius of checkbox when status is loading | null (same as borderRadius) |
loadingBorderStyle | Border style of checkbox when status is loading | null (same as borderStyle) |
loadingBorderWidth | Border width of checkbox when status is loading | null (same as borderWidth) |
size | Size of component in px. | 30 |
spinnerColor | Color of spinner | black |
spinnerRingColor | Color of loading ring | lightgray |
uncheckedBackgroundColor | Background color of checkbox when status is unchecked | white |
uncheckedBorderColor | Border color of checkbox when status is unchecked | null (same as borderColor) |
uncheckedBorderRadius | Border radius of checkbox when status is unchecked | null (same as borderRadius) |
uncheckedBorderStyle | Border style of checkbox when status is unchecked | null (same as borderStyle) |
uncheckedBorderWidth | Border width of checkbox when status is unchecked | null (same as borderWidth) |
require function:
v-bind:checkIcon="require(@/assets/path/to/icon.svg)" ✔️
:checkIcon="require(@/assets/path/to/icon.svg)" ✔️
checkIcon="@/assets/path/to/icon.svg" ❌
checkIcon="require(@/assets/path/to/icon.svg)" ❌
Visit CONTRIBUTING Page
npm install npm run serve npm run build-bundle npm run lint MIT