Angular Material 进度条,使用自定义颜色 [英] Angular Material progress bar, using custom colors
本文介绍了Angular Material 进度条,使用自定义颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个 Angular 5 项目,我在其中使用了材质进度条.我想使用自定义颜色.我尝试了几种解决方法(包括以前的 SO 问题),但无法破坏代码.我想根据进度百分比更改颜色.HTML:
I have a Angular 5 project where I’m using a material progress bar. I want to use custom colors. I’ve tried several workarounds (including previous SO questions) , but cannot break the code. I want to change the color based on percent progress. 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):
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;
}
}
}
}
}
}
非常感谢任何帮助...:-)
Any help VERY much appreciated...:-)
推荐答案
https://i.stack.imgur.com/P98jU.png
/deep/ .mat-progress-bar-fill::after {
background-color: green;
}
/deep/ .mat-progress-bar-buffer {
background: #E4E8EB;
}
这篇关于Angular Material 进度条,使用自定义颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文