Jelly-switch NPM

npm weekly downloads npm version MIT License

jelly-switch

A simple, customizable and jellified switch built as web component using ES6 javascript

NOTE:

This component is still in work in progress WIP. So there is a high chance that the API can change. So please be notified

jelly-switch-image

This micro web component(~1.7kB) can be used for any framework

Try Now

Play with the component

Install

1. via npm

npm i jelly-switch

(or)

2.via script tag

<script src ="https://unpkg.com/jelly-switch@0.2.3/lib/index.min.js"></script>

Usage

1.Import into module script(required only for npm install):

import { JellySwitch } from "jelly-switch"

2.Use it in your web page like any other HTML element

<jelly-switch id="js1"></jelly-switch>

3. Like any other input type, label can be used to bind with the jelly-switch element using 'slot' attribute as shown below. For more information on this, refer the Slots sub section in API section

<jelly-switch id="js1">
    <p slot="content-left">On/Off</p>
</jelly-switch>

API

Attributes

checked
Add this attribute to set the switch to toggled / checked mode i.e., equivalent to 'checked' attribute of input type
```
 <jelly-switch id="js1" checked></jellyswitch>
```
(or)
```
js1.checked = true
```

- `disabled`

Add this attribute to disable the switch and the opacity will be decreased to half and user can not interact with the switch and cursor will be changed to 'not-allowed'
```html
<jelly-switch id ="js1" disabled></jellyswitch>

(or)

js1.disabled = true;

Slots

For achieving the label binding with the input by for attribute, slot feature has been used in this custom element
For label to position to left of the jelly-switch , slot attribute with the value content-left can be used for any other native HTML Element as shown in the example below

<jelly-switch>
    <p slot="content-left">On/Off</p>
</jelly-switch>

For label to position to right of the jelly-switch , slot attribute with the value content-right can be used for any other native HTML Element as shown below

<jelly-switch>
    <p slot="content-right">On/Off</p>
</jelly-switch>

Slot name	Description	Image
`content-left`	This would render the label to left of the switch
`content-right`	This would render the label to right of the switch

Styling

The switch component can be styled as a normal and regular HTML element in CSS. There are list of CSS properties below with the default values

CSS variables	Default value	Description
`--off-color`	#FF4651	background color of switch when the switch is off or its value is set to false. Can assign any color to rgba, hex values
`--on-color`	#11C75D	background color of switch when the switch is on or its value is set to true. Can assign any color to rgba, hex values
`--onHandle-color`	#FFFFFF	color of switch Handle when the switch is on or its value is set to true. Can assign any color to rgba, hex values
`--offHandle-color`	#FFFFFF	color of switch Handle when the switch is off or its value is set to false. Can assign any color to rgba, hex values

The CSS variables can be set dynamically. For example, refer the following snippet

document.documentElement.style.setProperty('--off-color', 'rgba(25,89,79,0.7');

Events

toggle
- The toggle event is triggered when the user toggles the switches either by
  - clicking on the switch (or)
  - pressing space on the keyboard when the switch is focused
- The present value can be accessed from event.detail.value as shown in the below example

document.documentElement.addEventListener('toggle',handleToggle(e));

<jelly-switch onToggle="return handleToggle(e)"></jelly-switch>

and value can be obtained as follows

function handleToggle(e)
{
    //The value after the user toggles the switch can be accessed from the below code
    console.log('The present value of switch is '+e.detail.value);
    //here e is the event object 
}