js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

update docs, expose custom properties, rework to not use getComputedStyle

Browse Source
This commit is contained in:
Cory LaViska
2021-09-30 07:51:28 -04:00
parent a4aff0b1e9
commit f2a4db6291
4 changed files with 33 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/components/range.md
View File

@@ -5,7 +5,7 @@
Ranges allow the user to select a single value within a given range using a slider.
```html preview
<sl-range min="0" max="100" step="1"></sl-range>
<sl-range></sl-range>
```
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
@@ -36,6 +36,17 @@ To disable the tooltip, set `tooltip` to `none`.
<sl-range min="0" max="100" step="1" tooltip="none"></sl-range>
```
### Custom Track Colors
You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.
```html preview
<sl-range style="
--track-color-active: rgb(var(--sl-color-primary-600));
--track-color-inactive: rgb(var(--sl-color-primary-200));
"></sl-range>
```
### Custom Tooltip Formatter
You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.

2
docs/resources/changelog.md
View File

@@ -17,6 +17,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- Added the `filled` variation to `<sl-input>`, `<sl-textarea>`, and `<sl-select>` and supporting design tokens
- Added the `control` part to `<sl-select>` so you can target the main control with CSS [#538](https://github.com/shoelace-style/shoelace/issues/538)
- Added a border to `<sl-badge>` to improve contrast when drawn on various background colors
- Added `--track-color-active` and `--track-color-inactive` custom properties to `<sl-range>` [#550](https://github.com/shoelace-style/shoelace/issues/550)
- Added the undocumented custom properties `--thumb-size`, `--tooltip-offset`, `--track-height` on `<sl-range>`
- Changed the default `distance` in `<sl-dropdown>` from `2` to `0` [#538](https://github.com/shoelace-style/shoelace/issues/538)
- Fixed a bug where `<sl-select>` would be larger than the viewport when it had lots of options [#544](https://github.com/shoelace-style/shoelace/issues/544)
- Updated the default height of `<sl-progress-bar>` from `16px` to `1rem` and added a subtle shadow to indicate depth