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 | When a new tabs is opened. |

License

The LemonadeJS Switch is released under the MIT.

Package detail