vue-loading-checkbox

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:

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

GitHub