Angular PrimeNG ProgressBar 组件

简介

ProgressBar 组件是 PrimeNG 的一个组件，主要用于显示进度条，支持设置进度百分比、背景颜色、动画速度等属性。

安装

npm install primeng --save

引用

import { ProgressBarModule } from 'primeng/progressbar';

使用

<p-progressBar [value]="50" [style]="{'height': '20px'}"></p-progressBar>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p-progressBar [value]="50" [style]="{'height': '20px'}"></p-progressBar>
  `
})
export class AppComponent {}

参数

@Input() value?: number;
@Input() showValue?: boolean = true;
@Input() style?: any;
@Input() styleClass?: string;
@Input() mode?: 'determinate' | 'indeterminate' = 'determinate';
@Input() color?: string;
@Input() strokeWidth?: string;

示例

<p-progressBar [value]="value1" [style]="{'height': '20px'}"></p-progressBar>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p-progressBar [value]="value1" [style]="{'height': '20px'}"></p-progressBar>
    <p-progressBar [value]="value2" mode="indeterminate" [style]="{'height': '20px'}"></p-progressBar>
  `
})
export class AppComponent {
  value1 = 50;
  value2 = 0;
}

上面的示例中，第一个进度条的进度为 50%，是一个确定的进度条；第二个进度条是一个不确定的进度条，即没有具体的进度值，但是会动态地显示进度条。