Neverending Plethora of Modules

    jelly-switch

    0.2.3 • Public • Published

    Published on webcomponents.org 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 Edit jelly-switch component demo

    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'

    <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 jelly-switch-image-left
    content-right This would render the label to right of the switch jelly-switch-image-right

    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));

    or

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

    Accessibility

    • ARIA has been handled

    ToDos

    • Handle keyboard space event
    • Add box-shadow to focus
    • Accessibility check
    • Basic Unit testing
    • Lazy property handling
    • Documentation
    • npm publish
    • Add label 'for' support
    • Minify js file
    • Support safari browser
    • Writing the release notes (changeLog.md file)
    • Adding unit test cases
    • Write contribute.md file
    • handling drag event

    License

    MIT License (c) Akhil Sai

    Made with ❤️ by Akhil

    Install

    npm i jelly-switch

    DownloadsWeekly Downloads

    198

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    316 kB

    Total Files

    13

    Last publish

    Collaborators

    • akhil_001