Toggle Button

Toggle is a lightweight switch or toggle button library that is easy to customize and dynamic in a sense that it provides two types of buttons

• Pills (By Default)
• Flat buttons

Installation

Use the npm package manager

npm install vue3-toggle

Usage

In main.js

import "vue3-toggle"

In your vue file add code snippet

HTML

<Toggle v-model="toggle" :options="options" title="Toggle Title" @input="input" @selected="selected" />

Data

data() {
  return {
    toggle: "true",
    options: [
      {
        label: "Yes",
        value: "true",
        data: { name: "John", age: "13" }
      },
      {
        label: "No",
        value: "false",
        data: { name: "Amanda", age: "30" }
      },
    ],
  };
},

Props

 - disable (can be true or false)
 - tabs (can be true or false)
 - title (is a string to show a title on top of toggle button group)
 - options (object as shown in data)

Events

 - input(event)
 - selected(event)

Contact: [email protected]