@lemonadejs/switch NPM

LemonadeJS Switch

Official website and documentation is here

Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.

The LemonadeJS JavaScript Switch is a responsive and reactive component that enables users to make a binary choice through a visually appealing interface.

Features

Lightweight: The JavaScript Switch is only about 2 KBytes;
Integration: It can be used as a standalone library or integrated with any modern framework;

Getting Started

You can install using NPM or using directly from a CDN.

npm Installation

To install it in your project using npm, run the following command:

$ npm install @lemonadejs/switch

CDN

To use tabs via a CDN, include the following script tags in your HTML file:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/style.min.css" />

Usage

Quick example with Lemonade

import lemonade from 'lemonadejs'
import Switch from '@lemonadejs/switch';
import '@lemonadejs/switch/dist/style.css';

export default function App() {
    const self = this;

    return `<div>
        <Switch text="On/Off" />
    </div>`
}

You can find more examples here in the official documentation.

Settings

Attribute	Description
text?: string	The displayed text.
value?: any	The current value of the component.
name?: string	The attribute `name` assigned to the switch element.
disabled?: boolean	Disables the functionality of the switch.
onopen?	function	When a new tabs is opened.