我有一个Angular 5项目,我正在使用一个材料进度条。我想使用自定义颜色。我尝试了几种解决方法(包括以前的SO问题),但不能破坏代码。我想根据进度百分比更改颜色。 HTML:
<mat-progress-bar *ngIf="cell.name === 'progress'" [value]="cell.value"
class="mat-progress-bar-round my-color" [ngClass]="'color ' + ((cell.value <=
30) ? 'color-red' : (cell.value < 70) ? 'color-yellow' : 'color-green')">
</mat-progress-bar>`
sass(css):
mat-progress-bar {
&.mat-progress-bar-big {
padding: 13px 0;
}
&.mat-progress-bar-round {
border-radius: 11px;
height: 6px;
.mat-progress-bar-buffer {
background-color: $grey3;
}
.mat-progress-bar-fill {
&::after {
border-radius: 11px;
}
}
&.color {
.mat-progress-bar-fill {
&::after {
animation: none;
content: '';
display: inline-block;
left: 0;
}
}
&.color-red {
.mat-progress-bar-fill {
&::after {
background-color: $red;
}
}
}
&.color-yellow {
.mat-progress-bar-fill {
&::after {
background-color: $yellow;
}
}
}
&.color-green {
.mat-progress-bar-fill {
&::after {
background-color: $green;
}
}
}
&.color-aqua {
.mat-progress-bar-fill {
&::after {
background-color: $aqua;
}
}
}
}
}
}
任何帮助非常赞赏...... :-)
在.ts文件中设置颜色对我有用
<mat-progress-bar [value]="cell.value" [color]="cell.color">
</mat-progress-bar>
并在.ts文件中,
cell.color = 'primary'; //predefined color in default theme
我相信你可以用自定义颜色替换'primary'
https://i.stack.imgur.com/P98jU.png
/deep/ .mat-progress-bar-fill::after {
background-color: green;
}
/deep/ .mat-progress-bar-buffer {
background: #E4E8EB;
}