kopia lustrzana https://github.com/shoelace-style/shoelace
rename percentage => value
Cory LaViska
rodzic
7188425ac0
commit
4ad0480039
|
|
@ -5,7 +5,7 @@
|
|||
Progress bars are used to show the status of an ongoing operation.
|
||||
|
||||
```html preview
|
||||
<sl-progress-bar percentage="50"></sl-progress-bar>
|
||||
<sl-progress-bar value="50"></sl-progress-bar>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
|
@ -15,7 +15,7 @@ Progress bars are used to show the status of an ongoing operation.
|
|||
Use the `--height` custom property to set the progress bar's height.
|
||||
|
||||
```html preview
|
||||
<sl-progress-bar percentage="50" style="--height: 6px;"></sl-progress-bar>
|
||||
<sl-progress-bar value="50" style="--height: 6px;"></sl-progress-bar>
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
|
@ -23,7 +23,7 @@ Use the `--height` custom property to set the progress bar's height.
|
|||
Use the default slot to show a label.
|
||||
|
||||
```html preview
|
||||
<sl-progress-bar percentage="50" class="progress-bar-labels">50%</sl-progress-bar>
|
||||
<sl-progress-bar value="50" class="progress-bar-labels">50%</sl-progress-bar>
|
||||
|
||||
<br>
|
||||
|
||||
|
|
@ -36,22 +36,22 @@ Use the default slot to show a label.
|
|||
const addButton = subtractButton.nextElementSibling;
|
||||
|
||||
addButton.addEventListener('click', () => {
|
||||
const percentage = Math.min(100, progressBar.percentage + 10);
|
||||
progressBar.percentage = percentage;
|
||||
progressBar.textContent = `${percentage}%`;
|
||||
const value = Math.min(100, progressBar.value + 10);
|
||||
progressBar.value = value;
|
||||
progressBar.textContent = `${value}%`;
|
||||
});
|
||||
|
||||
subtractButton.addEventListener('click', () => {
|
||||
const percentage = Math.max(0, progressBar.percentage - 10)
|
||||
progressBar.percentage = percentage;
|
||||
progressBar.textContent = `${percentage}%`;
|
||||
const value = Math.max(0, progressBar.value - 10)
|
||||
progressBar.value = value;
|
||||
progressBar.textContent = `${value}%`;
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
### Indeterminate
|
||||
|
||||
The `indeterminate` attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, `percentage` is ignored and the label, if present, will not be shown.
|
||||
The `indeterminate` attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, `value` is ignored and the label, if present, will not be shown.
|
||||
|
||||
```html preview
|
||||
<sl-progress-bar indeterminate></sl-progress-bar>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
Progress rings are used to show the progress of a determinate operation in a circular fashion.
|
||||
|
||||
```html preview
|
||||
<sl-progress-ring percentage="25"></sl-progress-ring>
|
||||
<sl-progress-ring value="25"></sl-progress-ring>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
|
@ -15,7 +15,7 @@ Progress rings are used to show the progress of a determinate operation in a cir
|
|||
Use the `--size` custom property to set the diameter of the progress ring.
|
||||
|
||||
```html preview
|
||||
<sl-progress-ring percentage="50" style="--size: 200px;"></sl-progress-ring>
|
||||
<sl-progress-ring value="50" style="--size: 200px;"></sl-progress-ring>
|
||||
```
|
||||
|
||||
### Track Width
|
||||
|
|
@ -23,7 +23,7 @@ Use the `--size` custom property to set the diameter of the progress ring.
|
|||
Use the `track-width` attribute to set the width of the progress ring's track.
|
||||
|
||||
```html preview
|
||||
<sl-progress-ring percentage="50" stroke-width="10"></sl-progress-ring>
|
||||
<sl-progress-ring value="50" stroke-width="10"></sl-progress-ring>
|
||||
```
|
||||
|
||||
### Colors
|
||||
|
|
@ -32,7 +32,7 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
|
|||
|
||||
```html preview
|
||||
<sl-progress-ring
|
||||
percentage="50"
|
||||
value="50"
|
||||
style="
|
||||
--track-color: pink;
|
||||
--indicator-color: deeppink;
|
||||
|
|
@ -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.
|
||||
|
||||
```html preview
|
||||
<sl-progress-ring percentage="50" class="progress-ring-labels" style="margin-bottom: .5rem;">50%</sl-progress-ring>
|
||||
<sl-progress-ring value="50" class="progress-ring-labels" style="margin-bottom: .5rem;">50%</sl-progress-ring>
|
||||
|
||||
<br>
|
||||
|
||||
|
|
@ -58,15 +58,15 @@ Use the default slot to show a label.
|
|||
const addButton = subtractButton.nextElementSibling;
|
||||
|
||||
addButton.addEventListener('click', () => {
|
||||
const percentage = Math.min(100, progressRing.percentage + 10);
|
||||
progressRing.percentage = percentage;
|
||||
progressRing.textContent = `${percentage}%`;
|
||||
const value = Math.min(100, progressRing.value + 10);
|
||||
progressRing.value = value;
|
||||
progressRing.textContent = `${value}%`;
|
||||
});
|
||||
|
||||
subtractButton.addEventListener('click', () => {
|
||||
const percentage = Math.max(0, progressRing.percentage - 10)
|
||||
progressRing.percentage = percentage;
|
||||
progressRing.textContent = `${percentage}%`;
|
||||
const value = Math.max(0, progressRing.value - 10)
|
||||
progressRing.value = value;
|
||||
progressRing.textContent = `${value}%`;
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
## Next
|
||||
|
||||
- 🚨 BREAKING: removed `<sl-menu-divider>` (use `<sl-divider>` instead)
|
||||
- 🚨 BREAKING: removed `percentage` attribute from `<sl-progress-bar>` and `<sl-progress-ring>` (use `value`) instead
|
||||
- Added the `<sl-divider>` component
|
||||
- Added `--sl-surface-base` and `--sl-surface-base-alt` as early surface tokens to improve the appearance of alert, card, and panels in dark mode
|
||||
- Added the `--sl-panel-border-width` design token
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@ import styles from './progress-bar.styles';
|
|||
export default class SlProgressBar extends LitElement {
|
||||
static styles = styles;
|
||||
|
||||
/** The progress bar's percentage, 0 to 100. */
|
||||
@property({ type: Number, reflect: true }) percentage = 0;
|
||||
/** The current progress, 0 to 100. */
|
||||
@property({ type: Number, reflect: true }) value = 0;
|
||||
|
||||
/** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
|
||||
@property({ type: Boolean, reflect: true }) indeterminate = false;
|
||||
|
|
@ -40,9 +40,9 @@ export default class SlProgressBar extends LitElement {
|
|||
role="progressbar"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-valuenow="${this.indeterminate ? '' : this.percentage}"
|
||||
aria-valuenow="${this.indeterminate ? '' : this.value}"
|
||||
>
|
||||
<div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: this.percentage + '%' })}>
|
||||
<div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: this.value + '%' })}>
|
||||
${!this.indeterminate
|
||||
? html`
|
||||
<span part="label" class="progress-bar__label">
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@ export default class SlProgressRing extends LitElement {
|
|||
|
||||
@state() indicatorOffset: string;
|
||||
|
||||
/** The current progress percentage, 0 - 100. */
|
||||
@property({ type: Number, reflect: true }) percentage: number;
|
||||
/** The current progress, 0 to 100. */
|
||||
@property({ type: Number, reflect: true }) value = 0;
|
||||
|
||||
updated(changedProps: Map<string, any>) {
|
||||
super.updated(changedProps);
|
||||
|
|
@ -38,7 +38,7 @@ export default class SlProgressRing extends LitElement {
|
|||
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;
|
||||
const offset = circumference - (this.value / 100) * circumference;
|
||||
|
||||
this.indicatorOffset = String(offset) + 'px';
|
||||
}
|
||||
|
|
@ -52,8 +52,8 @@ export default class SlProgressRing extends LitElement {
|
|||
role="progressbar"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-valuenow="${this.percentage}"
|
||||
style="--percentage: ${this.percentage / 100}"
|
||||
aria-valuenow="${this.value}"
|
||||
style="--percentage: ${this.value / 100}"
|
||||
>
|
||||
<svg class="progress-ring__image">
|
||||
<circle class="progress-ring__track"></circle>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue