1.3.2 • Published 8 months ago

@lemonadejs/switch v1.3.2

Weekly downloads
-
License
-
Repository
-
Last release
8 months ago

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

AttributeDescription
text?: stringThe displayed text.
value?: anyThe current value of the component.
name?: stringThe attribute name assigned to the switch element.
disabled?: booleanDisables the functionality of the switch.
onopen?functionWhen a new tabs is opened.

License

The LemonadeJS Switch is released under the MIT.

Other Tools

1.3.2

8 months ago

1.3.0

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago