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.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Snippet Contents

Vue Toggle Switch Component ON-OFF

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

  <div id="root">
    <Toggle v-model="checked"/>
  </div>
  

Step 2: vuejs Part

Vue.component('Toggle', {
  template: `
    <span class="toggle-wrapper" @click="toggle" role="checkbox" :aria-checked="value.toString()" tabindex="0" @keydown.space.prevent="toggle">
      <span class="toggle-background" :style="bgstyles"></span>
      <span class="toggle-indicator" :style="dynamicCustomStyles"></span>
    </span>
  `,
  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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Toggle Switch Button in VueJs Example
  2.   Angularjs Get first and last value of list-item (li)
  3.   Vue js Toggle switch Update DB field using Ajax
  4.   The PHP Framework Laravel installation
  5.   Multidimensional arrays in Laravel
  6.   Jquery Restrict only 10 numbers input in textbox
  7.   Dynamically Routing In ASP.NET MVC With Example
  8.   Vuejs tree view Components And Modules - Vue Tree View Component
  9.   Vuejs Double Click to inline editing vue Grid Component
  10.   Blinking text CSS Animation

Leave a Reply

Your email address will not be published. Required fields are marked *