jb-switch v1.4.1

jb-switch

switch web-component with these benefits:

• support loading state
• pure js and ready to use
• beautiful animation
• customizable with your style with just css variable

using with JS frameworks

to use this component in react see jb-switch/react;

usage

npm i jb-switch

<jb-switch true-title="my enable" false-title="my-disable"></jb-switch>

set loading

document.querySelector("jb-switch").isLoading = true; //true or false

get/set value

alert(document.querySelector("jb-switch").value);
document.querySelector("jb-switch").value = true; //true or false

set custom style

in some cases in your project you need to change default style of web-component for example you need zero margin or different border-radius and etc.
if you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component.

usage example:

body{
  //if you want to change color of switch 
  --jb-switch-bg-color-active: green;
}

variable list

Other Related Docs:

• see jb-switch/react if you want to use this component in react.

• see All JB Design system Component List for more components.

• use Contribution Guide if you want to contribute in this component.