A vue UI component for loading checkbox

How to install

npm install vue-loading-checkbox --save

How to use

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>

Component props

| 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) |

:warning: Warning: You have to v-bind custom icon path with require function:

v-bind:checkIcon="require(@/assets/path/to/icon.svg)" :heavy_check_mark:

:checkIcon="require(@/assets/path/to/icon.svg)" :heavy_check_mark:

checkIcon="@/assets/path/to/icon.svg" :x:

checkIcon="require(@/assets/path/to/icon.svg)" :x:

Contributing

Visit CONTRIBUTING Page

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build-bundle

Lints and fixes files

npm run lint

License

MIT