angular 渐变进度栏 - angular-gradient-progressbar

angular 渐变进度栏 - angular-gradient-progressbar
插件名称 angular-gradient-progressbar
发布时间 2020年8月27日
插件作者 aditbharadwaj

Angular模块,用于在应用程序上呈现线性或分段的渐变进度条。

基本用法:

1.安装包装

# NPM
$ npm i angular-gradient-progressbar --save

2.导入进度条模块。

import { AngularGradientProgressbarModule } from "angular-gradient-progressbar";
@NgModule({
  declarations: [ ... ],
  imports: [AngularGradientProgressbarModule ]
})
export class YourModule {}

3.将进度条组件添加到页面。

// segmented
<angular-gradient-progressbar [type]="1"></angular-gradient-progressbar>
// linear
<angular-gradient-progressbar [type]="2"></angular-gradient-progressbar>

4.自定义进度栏。

// 50%
<angular-gradient-progressbar [type]="1" [value] ="50"]> </angular-gradient-progressbar>

// custom colors
<angular-gradient-progressbar [type]="1" lowTextColor="red"> </angular-gradient-progressbar>
<angular-gradient-progressbar [type]="1" mediumTextColor="orange"> </angular-gradient-progressbar>
<angular-gradient-progressbar [type]="1" highTextColor="green"> </angular-gradient-progressbar>

// width =5
<angular-gradient-progressbar [type]="1" [progressBarWidth]="5"]> </angular-gradient-progressbar>

// number of bars
<angular-gradient-progressbar [type]="1" [barCount] ="5"]> </angular-gradient-progressbar>

// shows tooltip
<angular-gradient-progressbar [type]="1" [quartileValueLow]="4" [quartileValueHigh]="7"]> </angular-gradient-progressbar>

// second value
<angular-gradient-progressbar [type]="2" [secondValue]="75"]> </angular-gradient-progressbar>