kopia lustrzana https://github.com/shoelace-style/shoelace
add tooltip guard
rodzic
60d9d9202b
commit
fc7836084a
|
@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
- Added experimental `<sl-animated-image>` component
|
||||
- Added `label` attribute to `<sl-progress-bar>` and `<sl-progress-ring>` to improve a11y
|
||||
- Fixed a bug where the tooltip would show briefly when clicking a disabled `<sl-range>`
|
||||
- Fixed a bug that caused a console error when `<sl-range>` was used
|
||||
- Fixed a bug where the `nav` part in `<sl-tab-group>` was on the incorrect element [#563](https://github.com/shoelace-style/shoelace/pull/563)
|
||||
- Updated to Bootstrap Icons to 1.6.1
|
||||
|
||||
|
|
|
@ -185,13 +185,15 @@ export default class SlRange extends LitElement {
|
|||
}
|
||||
|
||||
syncTooltip(percent: number) {
|
||||
const inputWidth = this.input.offsetWidth;
|
||||
const tooltipWidth = this.output.offsetWidth;
|
||||
const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');
|
||||
const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;
|
||||
if (this.output) {
|
||||
const inputWidth = this.input.offsetWidth;
|
||||
const tooltipWidth = this.output.offsetWidth;
|
||||
const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');
|
||||
const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;
|
||||
|
||||
this.output.style.transform = `translateX(${x})`;
|
||||
this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
|
||||
this.output.style.transform = `translateX(${x})`;
|
||||
this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
Ładowanie…
Reference in New Issue