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

License

mrastiak/vue-loading-checkbox

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Contributors 3

Languages

Packages