/vue-toggle

Primary LanguageVue

ToggleSwitch Component

The ToggleSwitch component is a reusable switch that supports both controlled and uncontrolled usage. It can display labels on both sides, emit updates on click, and be in a disabled state.

Quick Start

To begin, follow these steps:

  1. Install dependencies:

    npm install
# or, if you prefer yarn:
yarn

  2. Start the development server:

    npm run dev
# or, if you prefer yarn:
yarn dev

  3. Navigate to http://localhost:5173/ to see a demo of the component.

Features

  • TypeScript
  • SCSS and BEM styling
  • Script setup
  • Single File Component (SFC)

Transition Effects

The component provides transitions between the unchecked, checked, and disabled states. It uses CSS transitions for this purpose.