Wikiki / bulma-switch

Bulma's extension to display checkbox as a switch
MIT License
109 stars 67 forks source link

Sharing Vue component #71

Open vcmirko opened 2 years ago

vcmirko commented 2 years ago

You must add the scss file where you load the original sass. Would be great if you could add this to package.

<template>
  <span>
      <input type="checkbox" :id="_uid" class="switch" :class="type" :value="val" v-model="checked">
      <label :for="_uid"> {{ label }}</label>
  </span>
</template>
<script>
  import Vue from 'vue'
  import BulmaSwitch from "bulma-switch"
  import "../../public/assets/bulma_switch.scss"
  export default{
    name:"BulmaSwitch",
    props: ['type','value', 'val','label'],
    data () {
      return {
      }
    },
    computed: {
      checked: {
        get() {
          return this.value
        },
        set(value) {
          this.$emit('input', value)
        }
      }
    }
  }
</script>

Usage in vue:

              <div class="control mb-2">
                <BulmaSwitch v-model="myBooleanVariable" type="is-rounded is-warning" label="Your label" />
              </div>