kopia lustrzana https://github.com/shoelace-style/shoelace
fix animation bug
rodzic
c83581cf47
commit
7188425ac0
|
@ -12,10 +12,10 @@ Progress rings are used to show the progress of a determinate operation in a cir
|
||||||
|
|
||||||
### Size
|
### Size
|
||||||
|
|
||||||
Use the `size` attribute to set the diameter of the progress ring.
|
Use the `--size` custom property to set the diameter of the progress ring.
|
||||||
|
|
||||||
```html preview
|
```html preview
|
||||||
<sl-progress-ring percentage="50" size="200"></sl-progress-ring>
|
<sl-progress-ring percentage="50" style="--size: 200px;"></sl-progress-ring>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Track Width
|
### Track Width
|
||||||
|
@ -45,7 +45,7 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
|
||||||
Use the default slot to show a label.
|
Use the default slot to show a label.
|
||||||
|
|
||||||
```html preview
|
```html preview
|
||||||
<sl-progress-ring percentage="50" size="200" class="progress-ring-labels" style="margin-bottom: .5rem;">50%</sl-progress-ring>
|
<sl-progress-ring percentage="50" class="progress-ring-labels" style="margin-bottom: .5rem;">50%</sl-progress-ring>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
|
|
|
@ -21,6 +21,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
||||||
- Added the undocumented custom properties `--thumb-size`, `--tooltip-offset`, `--track-height` on `<sl-range>`
|
- 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)
|
- 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)
|
- 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)
|
||||||
|
- Fixed a bug where `<sl-progress-ring>` wouldn't animate in Safari
|
||||||
- Updated the default height of `<sl-progress-bar>` from `16px` to `1rem` and added a subtle shadow to indicate depth
|
- Updated the default height of `<sl-progress-bar>` from `16px` to `1rem` and added a subtle shadow to indicate depth
|
||||||
- Removed the `lit-html` dependency and moved corresponding imports to `lit` [#546](https://github.com/shoelace-style/shoelace/issues/546)
|
- Removed the `lit-html` dependency and moved corresponding imports to `lit` [#546](https://github.com/shoelace-style/shoelace/issues/546)
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { LitElement, html } from 'lit';
|
import { LitElement, html } from 'lit';
|
||||||
import { customElement, property, query } from 'lit/decorators.js';
|
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||||
import styles from './progress-ring.styles';
|
import styles from './progress-ring.styles';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -22,9 +22,28 @@ export default class SlProgressRing extends LitElement {
|
||||||
|
|
||||||
@query('.progress-ring__indicator') indicator: SVGCircleElement;
|
@query('.progress-ring__indicator') indicator: SVGCircleElement;
|
||||||
|
|
||||||
|
@state() indicatorOffset: string;
|
||||||
|
|
||||||
/** The current progress percentage, 0 - 100. */
|
/** The current progress percentage, 0 - 100. */
|
||||||
@property({ type: Number, reflect: true }) percentage: number;
|
@property({ type: Number, reflect: true }) percentage: number;
|
||||||
|
|
||||||
|
updated(changedProps: Map<string, any>) {
|
||||||
|
super.updated(changedProps);
|
||||||
|
|
||||||
|
//
|
||||||
|
// This block is only required for Safari because it doesn't transition the circle when the custom properties
|
||||||
|
// change, possibly because of a mix of pixel + unitless values in the calc() function. It seems like a Safari bug,
|
||||||
|
// but I couldn't pinpoint it so this works around the problem.
|
||||||
|
//
|
||||||
|
if (changedProps.has('percentage')) {
|
||||||
|
const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));
|
||||||
|
const circumference = 2 * Math.PI * radius;
|
||||||
|
const offset = circumference - (this.percentage / 100) * circumference;
|
||||||
|
|
||||||
|
this.indicatorOffset = String(offset) + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<div
|
<div
|
||||||
|
@ -34,10 +53,11 @@ export default class SlProgressRing extends LitElement {
|
||||||
aria-valuemin="0"
|
aria-valuemin="0"
|
||||||
aria-valuemax="100"
|
aria-valuemax="100"
|
||||||
aria-valuenow="${this.percentage}"
|
aria-valuenow="${this.percentage}"
|
||||||
|
style="--percentage: ${this.percentage / 100}"
|
||||||
>
|
>
|
||||||
<svg class="progress-ring__image">
|
<svg class="progress-ring__image">
|
||||||
<circle class="progress-ring__track"></circle>
|
<circle class="progress-ring__track"></circle>
|
||||||
<circle class="progress-ring__indicator" style="--percentage: ${this.percentage / 100};"></circle>
|
<circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<span part="label" class="progress-ring__label">
|
<span part="label" class="progress-ring__label">
|
||||||
|
|
Ładowanie…
Reference in New Issue