Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/javadbat/jb-button
simple web component button with some built-in function like loading
https://github.com/javadbat/jb-button
Last synced: 7 days ago
JSON representation
simple web component button with some built-in function like loading
- Host: GitHub
- URL: https://github.com/javadbat/jb-button
- Owner: javadbat
- License: mit
- Created: 2020-05-04T09:22:11.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-11-03T15:05:53.000Z (about 2 months ago)
- Last Synced: 2024-12-03T18:54:25.865Z (19 days ago)
- Language: SCSS
- Size: 33.2 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jb-button
simple button web-component with some additional features:
- custom styling
- suppor loading state
- typescript ready
- compatible with form elements
sample:
## instruction
### set loading
you can show loading by `element.isLoading = true`
you can add text to loading by `your button text`
### other attribute
| atribute name | description |
| ------------- | ------------- |
| type | change button HTML type |
| disabled | disable the button |
### change button style
you can inject your custom style by attribute to button.
```HTML
```
the other way of injecting style to jb-button is by providing css variable in component parent element to set some atttribute for example to set button height:
```css
.your-jb-button-wrapper{
/*degualt height of button is 44px but it will change it to 40px*/
--jb-button-height: 40px;
/* set button marging for example for zero margin:*/
--jb-button-margin: 0 0;
}
```
in some cases in your project you need to change defualt 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
| css variable name | description |
| ------------- | ------------- |
| --jb-button-margin | web-component margin defualt is `16px 0` |
| --jb-button-border-radius | web-component border-radius defualt is `16px` |
| --jb-button-border | web-component css border attribute default is `none` |
| --jb-button-primary-bgcolor | background color of button in primary |
| --jb-button-primary-hover-bgcolor | background color of button in primary |
| --jb-button-height | button height defualt is 44px |
| --jb-button-text-shadow | button text shadow defualt is `none` |
| --jb-button-color | color of text in button defualt is `#fff` |
| --jb-button-box-shadow | box shadow of the button component |
| --jb-button-font-weight | font weight of button defualt is `bold` |
| --jb-button-font-size | font size of button defualt is `1.2em` |
| --jb-button-color-hover | color of buttton in hover state |
| --jb-button-cursor | change button cursor defualt is `pointer` |
| --jb-button-bgcolor-disabled | background color of button when disabled |
| --jb-button-color-disabled | color of button when disabled |
| --jb-button-cursor-disabled | cursor of button when disabled |
| --jb-button-border-disabled | border of button when disabled |
| --jb-button-text-shadow-disabled | text shadow of button when disabled |
| --jb-button-loading-color | jb-loading icon color default is `#fff` |
| --jb-button-loading-color-hover | jb-loading icon color on hover default is `#fff` |