[英]Angular Material progress bar, using custom colors
I have a Angular 5 project where I'm using a material progress bar. 我有一个Angular 5项目,正在使用材质进度条。 I want to use custom colors. 我想使用自定义颜色。 I've tried several workarounds (including previous SO questions) , but cannot break the code. 我已经尝试了几种解决方法(包括之前的SO问题),但是无法破坏代码。 I want to change the color based on percent progress. 我想根据进度百分比更改颜色。 HTML: 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...:-) 任何帮助非常感谢... :-)
Setting the color in .ts file worked for me 在.ts文件中设置颜色对我有用
<mat-progress-bar [value]="cell.value" [color]="cell.color">
</mat-progress-bar>
and in .ts file, 在.ts文件中
cell.color = 'primary'; //predefined color in default theme
I believe you can replace 'primary' with your custom color 我相信您可以用自定义颜色替换“原色”
https://i.stack.imgur.com/P98jU.png https://i.stack.imgur.com/P98jU.png
/deep/ .mat-progress-bar-fill::after {
background-color: green;
}
/deep/ .mat-progress-bar-buffer {
background: #E4E8EB;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.