https://github.com/javadbat/jb-switch
switch web-component
https://github.com/javadbat/jb-switch
Last synced: 4 months ago
JSON representation
switch web-component
- Host: GitHub
- URL: https://github.com/javadbat/jb-switch
- Owner: javadbat
- License: mit
- Created: 2024-01-28T12:45:05.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-23T15:39:45.000Z (about 1 year ago)
- Last Synced: 2024-11-30T16:56:58.032Z (about 1 year ago)
- Language: TypeScript
- Size: 21.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# jb-switch
[](https://www.webcomponents.org/element/jb-switch)
[](https://raw.githubusercontent.com/javadbat/jb-switch/main/LICENSE)
[](https://www.npmjs.com/package/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`](https://github.com/javadbat/jb-switch/tree/main/react);
## usage
```terminal
npm i jb-switch
```
```html
```
### set loading
```javascript
document.querySelector("jb-switch").isLoading = true; //true or false
```
### get/set value
```javascript
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:
```css
body{
//if you want to change color of switch
--jb-switch-bg-color-active: green;
}
```
#### variable list
| css variable name | description |
| ------------- | ------------- |
| --jb-switch-bg-color-active | background color of switch when value is true |
| --jb-switch-bg-color | background color of switch when value is false |
| --jb-switch-ring-color | trigger ring color when value is false |
| --jb-switch-ring-color-active | trigger ring color when value is true |
## Other Related Docs:
- see [`jb-switch/react`](https://github.com/javadbat/jb-switch/tree/main/react) if you want to use this component in react.
- see [All JB Design system Component List](https://javadbat.github.io/design-system/) for more components.
- use [Contribution Guide](https://github.com/javadbat/design-system/blob/main/docs/contribution-guide.md) if you want to contribute in this component.