Angular Material 7 – 进度条

进度条是我们经常会在项目中用到的一种组件，Angular Material 7提供了一个非常简单易用的进度条组件。

如何引入Angular Material进度条组件

首先，在项目中首先需要引用@angular/material库，可以通过以下命令进行安装：

npm install --save @angular/material @angular/cdk

然后在app.module.ts文件里引入MaterialModule：

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatToolbarModule, MatInputModule, MatProgressBarModule } from '@angular/material';

@NgModule({
  imports: [ BrowserAnimationsModule, MatButtonModule, MatToolbarModule, MatInputModule, MatProgressBarModule ],
  exports: [ BrowserAnimationsModule, MatButtonModule, MatToolbarModule, MatInputModule, MatProgressBarModule ]
})
export class MaterialModule { }

如何使用进度条组件

在模板中，只需要添加<mat-progress-bar>标签即可，具体代码如下：

<mat-progress-bar mode="determinate" value="50"></mat-progress-bar>

其中，mode属性代表进度条的模式，有两种模式：determinate和indeterminate，value属性代表进度条的当前进度值，取值范围为0到100。

可以在组件的ts文件中定义一个变量来表示进度值，然后通过双向绑定的方式将变量值传给value属性，从而实现进度条随进度变化。

进度条样式定制

<mat-progress-bar>支持多种样式自定义，以下是几种常见的样式定制方式。

修改进度条颜色

可以通过color属性来修改进度条的颜色，具体代码如下：

<mat-progress-bar mode="determinate" value="50" color="primary"></mat-progress-bar>

其中，color属性的取值可以是以下几个值：

• primary（默认值）
• accent
• warn

如果需要设置其他颜色，可以自定义CSS样式。

修改进度条高度和宽度

可以通过修改height和width属性来调整进度条的高度和宽度，具体代码如下：

<mat-progress-bar mode="determinate" value="50" height="24px" width="200px"></mat-progress-bar>

去掉进度条动画效果

进度条会有默认的动画效果，但是有时候我们需要去掉这个动画效果，可以通过添加[mode]="determinate"属性来实现，如下所示：

<mat-progress-bar [mode]="determinate" value="50"></mat-progress-bar>

根据进度值动态调整进度条样式

进度条的样式根据进度值而变化，可以通过绑定类的方式来实现，具体代码如下：

<mat-progress-bar mode="determinate" [class.low]="value < 30" [class.medium]="value >= 30 && value < 70" [class.high]="value >= 70" [value]="value"></mat-progress-bar>

这里定义了三种不同的样式：低、中、高，根据进度值的不同分别将不同的类绑定到进度条上。

.low ::ng-deep .mat-progress-bar-fill::after { background-color: red; }
.low ::ng-deep .mat-progress-bar-buffer { background-color: rgba(255,0,0,0.2) !important; }

.medium ::ng-deep .mat-progress-bar-fill::after { background-color: orange; }
.medium ::ng-deep .mat-progress-bar-buffer { background-color: rgba(255,165,0,0.2) !important; }

.high ::ng-deep .mat-progress-bar-fill::after { background-color: green; }
.high ::ng-deep .mat-progress-bar-buffer { background-color: rgba(0,128,0,0.2) !important; }

然后通过CSS样式来定义各种样式，实现根据不同的类显示不同的样式效果。

进度条缓冲效果

<mat-progress-bar>还支持缓冲效果，可以通过bufferValue属性来指定缓冲区域的进度值，如下所示：

<mat-progress-bar mode="buffer" value="50" bufferValue="75"></mat-progress-bar>

这里使用了mode属性值为buffer，同时通过bufferValue属性来定义了缓冲区域的进度值，进度条将会从当前值到缓冲值之间来回波动。

进度条动画

<mat-progress-bar>组件有默认的动画效果，可以通过在模板中添加[animationDuration]属性来设置动画持续时间，如下所示：

<mat-progress-bar mode="indeterminate" [animationDuration]="10000"></mat-progress-bar>

这里将mode设置为indeterminate，表示进度条模式为不确定模式，然后通过[animationDuration]属性将动画持续时间设置为10秒，默认动画持续时间为2秒。

总结

Angular Material 7提供了非常简单易用的进度条组件，可以通过设置模式、进度值、缓冲值、样式等多种方式来满足不同场景下的需求。对于有动画需求的进度条，也提供了默认的动画效果，并且可以通过额外的属性来控制动画的持续时间。