Angular material进度条 | mat-progress-bar 示例

迪鲁宾
659 阅读3分钟

在这篇博文中，我们将通过实例来学习Angular material进度条。

进度条UI元素

进度条是一个交互式的UI元素，用于显示操作的进度，例如，在下载、上传和复制文件时，你需要以图形形式显示状态。

有不同类型的进度条

  • 确定的进度条--进度条以已知的操作进度显示，例如3分钟。
  • 不确定的进度条--在显示进度条时，不知道进行一项操作所需的时间。

进度条ui元素可用于Web、移动和桌面应用程序。

进度条的最佳例子可以观察到，当你在windows中从一个文件夹复制文件到另一个文件夹时，显示进度操作。

Angular Material框架的进度条具有丰富的功能，可以在Angular应用程序中重复使用。

Angular Material进度条的例子

为了在angular应用程序中使用进度条，Material框架提供了MatProgressBarModule ，你需要将其导入app.module.ts中：

import { BrowserModule } from "@angular/platform-browser";

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import {MatProgressBarModule} from '@angular/material/progress-bar';


@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatProgressBarModule
  ],
  declarations: [AppComponent,],
  bootstrap: [AppComponent],
  providers: [],
  exports: [AppComponent]
})
export class AppModule {}

MatProgressBarModule 包含mat-progress-bar component

创建一个组件app.component.ts

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

Buffer progress-bar

<mat-progress-bar mode="buffer"></mat-progress-bar>

indeterminate progress bar
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
Query Progress
<mat-progress-bar mode="query"></mat-progress-bar>

输出Angular material progress bar example

正如你所看到的，mode 属性有不同的进度条类型。

在这个操作中，时间是已知的，并根据它来显示进度条。

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

在这个进度条中，状态是不知道的，最好的例子是从后端返回的API响应。

<mat-progress-bar mode="indeterminate"></mat-progress-bar>
  • 缓冲区 缓冲区是更新操作的状态，缓冲值为秒。
<mat-progress-bar mode="buffer" value=20 bufferValue=40></mat-progress-bar>
  • 查询模式启动默认的进度条，根据已知/未知的状态，它将加载确定/不确定的模式。
<mat-progress-bar mode="query" ></mat-progress-bar>

如何改变进度条的颜色

进度条使用材料风格的主题。

每个组件都有以下颜色

原色--主色 重音--辅助色 战争--中性色

那么如何改变进度条的填充背景颜色，默认情况下它使用原色蓝色:

::ng-deep .mat-progress-bar-fill::after {
    background-color: red;
}

::ng-deep .mat-progress-bar-buffer {
    background: red;
}

如何增加进度条的高度？

::ng-deep .mat-progress-bar {
        height: 8px;

}

或者你还可以在css/scss中写一个自定义类:

mat-progress-bar.downloadProgress .mat-progress-bar-fill::after {
  background-color: red;
}

将自定义的类添加到css/scss的class属性mat-progress-bar中

<mat-progress-bar class="downloadProgress" mode="determinate" value="60"></mat-progress-bar>

这是一个以时间间隔显示进度条的例子，例如，从0到60秒每秒钟显示进度条的状态。

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

默认值为0，每1秒增加1:

 value = 100;
  seconds: number = 0;
  ngOnInit() {
    const time = 60;
    const timer$ = interval(1000);

    const subscribe = timer$.subscribe(second => {
      this.value = 100 - (sec * 100) / 60;
      this.seconds = second;

      if (this.seconds === 60) {
        subscribe.unsubscribe();
      }
    });
  }

Angular材料的进度条动画没有显示

有些时候，一旦你配置好一切，你会看到以下问题

  • 不确定的进度条不能正常工作
  • 查询模式不能正常显示动画。

所有这些问题都与动画以及样式有关 你如何解决这些问题？

请按照以下步骤来解决所有的进度条问题

  • 请确保在应用程序根中导入BrowserAnimationsModule ，或者你的模块.material组件依赖于BrowserAnimationsModule 模块。

  • 请不要导入NoopAnimationsModule ，因为这将使进度条的动画功能失效。

  • 在style.scss中，请导入material主题，这样所有的进度条选择器都被初始化为主题样式。

@import '~@angular/material/core/theming/prebuilt-themes/deeppurple-amber.css';

总结

综上所述，这篇文章讨论了angular material进度条例子的用法，模式，以及如何定制自定义样式，css选择器，还有添加时间间隔的进度条例子，最后讨论了进度条的动画问题。

avatar
文章
阅读
粉丝