Vue Toggle Switch Component ON-OFF

Today, We want to share with you Vue Toggle Switch Component ON-OFF.In this post we will show you vue cli toggle button, hear for Vue Toggle Switch Button Component ON-OFF Switch we will give you demo and example for implement.In this post, we will learn about How to create a reusable toggle switch component with Vue.js with an example.

Vue Toggle Switch Component ON-OFF

Contents

There are the Following The simple About Vue Toggle Switch Component ON-OFF Full Information With Example and source code.

As I will cover this Post with live Working example to develop bootstrap vue toggle switch, so the vue bootstrap toggle button for this example is following below.

Vue js toggle switch button example

Vue.js Toggle Switch Button Component ON-OFF Switch

Step 1: Html Source Code

Step 2: vuejs Part


Vue.component('Toggle', {
  template: `
    
      
      
    
  `,
  props: ['value'],
  methods: {
    toggle() {
      this.$emit('input', !this.value)
    }
  },
  computed: {
    bgstyles() {
      return {
      	backgroundColor: this.value ? '#3490dc' : '#dae1e7'
      }
    },
    dynamicCustomStyles() {
      return { transform: this.value ? 'translateX(2rem)' : 'translateX(0)' }
    }
  }
})

new Vue({
	data: {
  	checked: true,
  }
}).$mount('#root')

step 3: Css Part


* { box-sizing: border-box }

#root {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #fff;
  padding: 2rem;
}

.toggle-wrapper {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 2rem;
  width: 4rem;
  border-radius: 9999px;
}
.toggle-wrapper:focus {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(52,144,220,.5);
}

.toggle-background {
  display: inline-block;
  border-radius: 9999px;
  height: 100%;
  width: 100%;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color .2s ease;
}

.toggle-indicator {
  position: absolute;
  top: .25rem;
  left: .25rem;
  height: 1.5rem;
  width: 1.5rem;
  background-color: #fff;
  border-radius: 9999px;
  box-shadow:  0 2px 4px rgba(0,0,0,0.1);
  transition: transform .2s ease;
}

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Vue Toggle Switch Component ON-OFF.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.