[英]Angular Material progress bar, using custom colors
我有一個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
我相信您可以用自定義顏色替換“原色”
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.