Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/javadbat/jb-switch
switch web-component
https://github.com/javadbat/jb-switch
Last synced: 7 days 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 (11 months ago)
- Default Branch: main
- Last Pushed: 2024-11-23T15:39:45.000Z (29 days ago)
- Last Synced: 2024-11-30T16:56:58.032Z (22 days 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
switch web-component with an smooth animation.
## usage
```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 |