A highly customizable Vue.js checkbox UI component with loading state
Clone or download
Latest commit 37acdab Jan 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public init Nov 12, 2018
src Added border radius props, closes #4 Dec 11, 2018
.browserslistrc init Nov 12, 2018
.editorconfig init Nov 12, 2018
.eslintrc.js init Nov 12, 2018
.gitignore init Nov 12, 2018
.npmignore Added .npmignore file Nov 20, 2018
CONTRIBUTING.md updated documentation Dec 11, 2018
LICENSE Started working on project Nov 12, 2018
README.md updated documentation Dec 11, 2018
babel.config.js init Nov 12, 2018
package-lock.json Updated dependencies Jan 13, 2019
package.json Updated dependencies Jan 13, 2019
postcss.config.js init Nov 12, 2018
vue.config.js Added vue.config.js Nov 20, 2018

README.md

vue-loading-checkbox

vue-loading-checkbox

npm version

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: You have to v-bind custom icon path with 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)"

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