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

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

Read Also:  php remove last character from string Code Example

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 :

Read Also:  Toggle Switch Button in VueJs Example

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. Read Also:  Vue js Toggle switch Update DB field using Ajax
  2. Read Also:  Vuejs tree view Components And Modules - Vue Tree View Component
  3. Read Also:  CodeIgniter Enable Disable debug mode
  4. Read Also:  Define Custom Laravel Validation Rules Example
  5. Read Also:  Laravel 6 Sweet Alert Tutorial With Example
  6. Read Also:  jQuery Accordion Vertical Menu using CSS
  7. Read Also:  VueJS nested child, template, inner template, components
  8. Read Also:  Vuejs Double Click to inline editing vue Grid Component
  9. Read Also:  Laravel 6 After Today Validation Tutorial Example
  10. Read Also:  vuejs Radio Button on Form Submit Example
CLOSEX