mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
feat(progress): add max
property
PiperOrigin-RevId: 549673538
This commit is contained in:
parent
2dabbdc142
commit
02a509b480
@ -23,6 +23,7 @@ function cssWire<T = string>(prop: string, unit = '') {
|
||||
const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
|
||||
'Progress indicators', [
|
||||
new Knob('value', {ui: numberInput({step: 0.1}), defaultValue: 0.5}),
|
||||
new Knob('max', {ui: numberInput(), defaultValue: 1}),
|
||||
new Knob('indeterminate', {ui: boolInput(), defaultValue: false}),
|
||||
new Knob('fourColor', {ui: boolInput(), defaultValue: false}),
|
||||
new Knob(
|
||||
|
@ -20,6 +20,7 @@ import {classMap} from 'lit/directives/class-map.js';
|
||||
/** Knob types for linear progress stories. */
|
||||
export interface StoryKnobs {
|
||||
value: number;
|
||||
max: number;
|
||||
'buffer (linear)': number;
|
||||
indeterminate: boolean;
|
||||
fourColor: boolean;
|
||||
@ -47,7 +48,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
}
|
||||
`,
|
||||
render(knobs) {
|
||||
const {value, indeterminate, fourColor} = knobs;
|
||||
const {value, max, indeterminate, fourColor} = knobs;
|
||||
const buffer = knobs['buffer (linear)'];
|
||||
const classes = {'custom': knobs['custom theme (linear)']};
|
||||
|
||||
@ -55,6 +56,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
<md-linear-progress
|
||||
class=${classMap(classes)}
|
||||
.value=${value}
|
||||
.max=${max}
|
||||
.buffer=${buffer}
|
||||
.indeterminate=${indeterminate}
|
||||
.fourColor=${fourColor}
|
||||
@ -65,10 +67,11 @@ const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
|
||||
const standardCircular: MaterialStoryInit<StoryKnobs> = {
|
||||
name: 'Circular progress',
|
||||
render({value, indeterminate, fourColor}) {
|
||||
render({value, max, indeterminate, fourColor}) {
|
||||
return html`
|
||||
<md-circular-progress
|
||||
.value=${value}
|
||||
.max=${max}
|
||||
.indeterminate=${indeterminate}
|
||||
.fourColor=${fourColor}
|
||||
></md-circular-progress>`;
|
||||
@ -87,7 +90,7 @@ const iconButton: MaterialStoryInit<StoryKnobs> = {
|
||||
position: absolute;
|
||||
}
|
||||
`,
|
||||
render({value, indeterminate, fourColor}) {
|
||||
render({value, max, indeterminate, fourColor}) {
|
||||
const toggle = ({target}: Event) => {
|
||||
const spinner =
|
||||
((target as HTMLElement).parentElement as MdCircularProgress);
|
||||
@ -98,6 +101,7 @@ const iconButton: MaterialStoryInit<StoryKnobs> = {
|
||||
<div class="around-icon">
|
||||
<md-circular-progress
|
||||
.value=${value}
|
||||
.max=${max}
|
||||
.indeterminate=${indeterminate}
|
||||
.fourColor=${fourColor}
|
||||
></md-circular-progress>
|
||||
@ -116,7 +120,7 @@ const insideButton: MaterialStoryInit<StoryKnobs> = {
|
||||
--md-tonal-button-with-icon-spacing-trailing: 8px;
|
||||
width: 80px;
|
||||
}`,
|
||||
render({value, indeterminate, fourColor}) {
|
||||
render({value, max, indeterminate, fourColor}) {
|
||||
const loadTime = 2500;
|
||||
let loadTimeout = -1;
|
||||
const toggleLoad = (target: MdTonalButton) => {
|
||||
@ -141,6 +145,7 @@ const insideButton: MaterialStoryInit<StoryKnobs> = {
|
||||
}}>
|
||||
<md-circular-progress slot="nothing"
|
||||
.value=${value}
|
||||
.max=${max}
|
||||
.indeterminate=${indeterminate}
|
||||
.fourColor=${fourColor}
|
||||
></md-circular-progress>
|
||||
|
@ -23,15 +23,16 @@ export class CircularProgress extends Progress {
|
||||
// Determinate mode is rendered with an svg so the progress arc can be
|
||||
// easily animated via stroke-dashoffset.
|
||||
private renderDeterminateContainer() {
|
||||
const dashOffset = (1 - this.value) * 100;
|
||||
const dashOffset = (1 - this.value / this.max) * 100;
|
||||
// note, dash-array/offset are relative to Setting `pathLength` but
|
||||
// Chrome seems to render this inaccurately and using a large viewbox helps.
|
||||
const pathLength = 100;
|
||||
return html`<svg viewBox="0 0 4800 4800">
|
||||
<circle class="track" pathLength="${pathLength}"></circle>
|
||||
<circle class="progress" pathLength="${pathLength}" stroke-dashoffset="${
|
||||
dashOffset}"></circle>
|
||||
</svg>`;
|
||||
return html`
|
||||
<svg viewBox="0 0 4800 4800">
|
||||
<circle class="track" pathLength="100"></circle>
|
||||
<circle class="progress" pathLength="100"
|
||||
stroke-dashoffset=${dashOffset}></circle>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
||||
// Indeterminate mode rendered with 2 bordered-divs. The borders are
|
||||
|
@ -36,10 +36,12 @@ export class LinearProgress extends Progress {
|
||||
// due to a now fixed Chrome bug: crbug.com/389359.
|
||||
protected override renderIndicator() {
|
||||
const progressStyles = {
|
||||
transform: `scaleX(${(this.indeterminate ? 1 : this.value) * 100}%)`
|
||||
transform:
|
||||
`scaleX(${(this.indeterminate ? 1 : this.value / this.max) * 100}%)`
|
||||
};
|
||||
const bufferStyles = {
|
||||
transform: `scaleX(${(this.indeterminate ? 1 : this.buffer) * 100}%)`
|
||||
transform:
|
||||
`scaleX(${(this.indeterminate ? 1 : this.buffer / this.max) * 100}%)`
|
||||
};
|
||||
|
||||
return html`
|
||||
|
@ -20,10 +20,15 @@ export abstract class Progress extends LitElement {
|
||||
}
|
||||
|
||||
/**
|
||||
* Progress to display, a fraction between 0 and 1.
|
||||
* Progress to display, a fraction between 0 and `max`.
|
||||
*/
|
||||
@property({type: Number}) value = 0;
|
||||
|
||||
/**
|
||||
* Maximum progress to display, defaults to 1.
|
||||
*/
|
||||
@property({type: Number}) max = 1;
|
||||
|
||||
/**
|
||||
* Whether or not to display indeterminate progress, which gives no indication
|
||||
* to how long an activity will take.
|
||||
@ -43,7 +48,7 @@ export abstract class Progress extends LitElement {
|
||||
role="progressbar"
|
||||
aria-label="${ariaLabel || nothing}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="1"
|
||||
aria-valuemax=${this.max}
|
||||
aria-valuenow=${this.indeterminate ? nothing : this.value}
|
||||
>${this.renderIndicator()}</div>
|
||||
`;
|
||||
|
Loading…
Reference in New Issue
Block a user