角材料7-进度栏 - 芒果文档

📌 相关文章

📜 角材料7-进度栏

📅 最后修改于: 2020-10-28 04:53:34 🧑 作者: Mango

（角度指令）用于显示具有材料样式的进度条。

在本章中，我们将展示使用Angular Material绘制确定性和不确定性进度条所需的配置。

创建角度应用

请按照以下步骤更新我们在Angular 6-Project Setup一章中创建的Angular应用程序–

Step	Description
1	Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter.
2	Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

以下是修改后的模块描述符app.module.ts的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatProgressBarModule, MatRadioModule, MatSliderModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatProgressBarModule, MatRadioModule, MatSliderModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的ts文件app.component.css的内容。

.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
}
.tp-margin {
   margin: 0 10px;
}

以下是修改后的HTML主机文件app.component.html的内容。


   Color:
   
      
         Primary
      
      
         Accent
      
      
         Warn
      
   


   Mode:
   
      
         Determinate
      
      
         Indeterminate
      
      
         Buffer
      
      
         Query
      
   


   Progress:
   


   Buffer:
   


   Mode: {{mode}}

以下是修改后的ts文件app.component.ts的内容。

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp'; 
   color = 'primary';
   mode = 'determinate';
   value = 50;
   bufferValue = 75;
}

结果

验证结果。

进度条

细节

在这里，我们使用mat-progress-bar创建了进度条。