在Angular Material中mat-progress-bar介绍

介绍:

Angular Material是一个UI组件库，由Angular团队开发，用于构建桌面和移动Web应用程序的设计组件。为了安装它，我们需要在我们的项目中安装Angular，一旦你有了它，你可以输入下面的命令并可以下载它。<mat-progress-bar>标签用于显示进度条。进度条用于显示某项任务的状态。

安装:

ng add @angular/material

步骤:

首先，使用上述命令安装Angular Material。
完成安装后，在app.module.ts文件中从’@angular/material/progress-bar’导入’MatProgressBarModule’。
为了使用进度条，我们需要简单地使用<mat-progress-bar>标签。
他们有许多类型的进度条，如确定的、不确定的、缓冲的等等。
为了显示进度，我们需要给标签赋予一个值属性。
如果我们想改变主题，我们可以通过使用颜色属性来改变它。在angular中，我们有3个主题，它们是主要的、重点的和警告的。
一旦完成了上述步骤，就可以服务或开始项目。

代码实现:

app.module.ts:

import { CommonModule } from '@angular/common'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { MatProgressBarModule } from '@angular/material'; 
    
import { AppComponent } from './example.component'; 
    
@NgModule({ 
  declarations: [AppComponent], 
  exports: [AppComponent], 
  imports: [ 
    CommonModule, 
    FormsModule, 
    MatProgressBarModule
  
  ], 
}) 
export class AppModule {}

app.component.html:

<h4> Progress Bars with primary theme </h4>
  
<mat-progress-bar mode="determinate" 
    value="40">
<br><br><br>
  
<mat-progress-bar mode="buffer" 
    value="40">
<br><br><br>
  
<mat-progress-bar mode="indeterminate" 
    value="40">
  
<h4> Progress Bars with warn theme </h4>
<mat-progress-bar mode="determinate" 
    value="40" color="warn">
<br><br><br>
  
<mat-progress-bar mode="buffer" value="40" 
    color="warn">
<br><br><br>
  
<mat-progress-bar mode="indeterminate" 
    value="40" color="warn">
<br><br><br>
  
<h4> Progress Bars with accent theme </h4>
  
<mat-progress-bar mode="determinate" value="40"
        color="accent">
<br><br><br>
  
<mat-progress-bar mode="buffer" value="40" 
    color="accent">
<br><br><br>
  
<mat-progress-bar mode="indeterminate" 
    value="40" color="accent">

输出:

在Angular Material中mat-progress-bar介绍