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>`
}

import React, { useRef } from "react";
import Switch from "@lemonadejs/switch/dist/react";
import '@lemonadejs/switch/dist/style.css';

export default function App() {
    const switchRef = useRef();
    return (
        <>
            <Switch text='On/Off' ref={switchRef} />
        </>
    );
}

Quick example with Lemonade

<template>
  <Switch text='On/Off' />
</template>

<script>
import Switch from '@lemonadejs/switch/dist/vue';
import '@lemonadejs/switch/dist/style.css';

export default {
  name: 'App',
  components: {
    Switch,
  },
};
</script>

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

License

The LemonadeJS Switch is released under the MIT.