进度条 Progress bar

progress-bar 概览

<mat-progress-bar> 是一个水平进度条,以指示进度和活动。

<mat-progress-bar> is a horizontal progress-bar for indicating progress and activity.

进度条支持四种模式:确定(determinate)、待定(indeterminate)、缓存(buffer)和查询(query)。

The progress-bar supports four modes: determinate, indeterminate, buffer and query.

对于那些已知操作完成度的操作,应该使用确定的指示符。

Operations where the percentage of the operation complete is known should use the determinate indicator.

Determinate progress-bar

这是默认模式,其进度由 value 属性表示。

This is the default mode and the progress is represented by the value property.

对于那些要求用户等待却无法预估它要多久完成的操作时,应该使用待定指示符。

Operations where the user is asked to wait while something finishes and it’s not necessary to indicate how long it will take should use the indeterminate indicator.

Indeterminate progress-bar

这种模式下,会忽略 value 属性的值。

In this mode the value property is ignored.

使用进度条的 buffer 模式来表示正在进行某些活动,或正在从服务器加载。

Use the buffer mode of the progress-bar to indicate some activity or loading from the server.

Buffer progress-bar

在缓存模式下,value 用来表示已完成的主进度,而 bufferValue 用于显示额外的缓存进度。

In "buffer" mode, value determines the progress of the primary bar while the bufferValue is used to show the additional buffering progress.

使用进度条的 query 模式来表示开始真正加载之前的预加载过程。

Use the query mode of the progress-bar to indicate pre-loading before the actual loading starts.

Query progress-bar

在查询模式下,进度条会渲染成一个反向的 "待定条"。一旦进度值可用,就应该把 mode 改为确定(determinate),以表达实际进度。 在这种模式下,会忽略 value 属性。

In "query" mode, the progress-bar renders as an inverted "indeterminate" bar. Once the response progress is available, the mode should be changed to determinate to convey the progress. In this mode the value property is ignored.

进度条的颜色可以用 color 属性进行修改。默认情况下,进度条会使用主题的主色调(primary)。它可以修改为 'accent''warn'

The color of a progress-bar can be changed by using the color property. By default, progress-bars use the theme's primary color. This can be changed to 'accent' or 'warn'.

每个进度条都应该通过 aria-labelaria-labelledby 给出一个有意义的标签。

Each progress bar should be given a meaningful label via aria-label or aria-labelledby.