从代码更改角度材料进度条颜色 [英] Change angular material progress bar color from code
问题描述
我需要动态更改角度材料进度条的颜色. 我意识到这并不那么简单,那么最好的方法是什么?
I need to change the color of angular material progress bar dynamically. I realized that it is not that simple, so what is the best way to to it?
要求:
- 我将从外部API接收彩色十六进制代码.所以我无法创建一组预定义的主题
- 背景颜色为白色.因此,我只需要一种颜色,而不是整个调色板(较浅,较深)的颜色.
相关链接:(1)
推荐答案
我们可以创建一个属性指令,该指令接受颜色值并为我们覆盖<mat-progress-bar>
的默认样式.
We can create an attribute directive which accepts the color value and override default styles of <mat-progress-bar>
for us.
这是一个有效的演示: https://stackblitz.com/edit/material-progress-bar-color-directive
here is a working demo : https://stackblitz.com/edit/material-progress-bar-color-directive
这是一个简短的解释:
如果我们在开发人员工具中检查<mat-progress-bar>
.我们会发现进度条的颜色是在::after
伪元素中定义的,就像这样.
If we inspect <mat-progress-bar>
in developer tools. we will find that color of the progress-bar is defined in the ::after
pseudo element like this.
.mat-progress-bar-fill::after {
background-color: #3f51b5;
}
我们已经知道,不可能使用DOM querySelector()方法直接直接操纵一个伪元素.但是我们可以添加新样式,这些样式也可以具有伪元素规则.检出此线程以获取更多详细信息. https://stackoverflow.com/a/21709814/1160236
And as we already know that it is not possible to directly manipulate a pseudo element using DOM querySelector() method. But we can add new styles which can have rules for pseudo elements too. checkout this thread for more details. https://stackoverflow.com/a/21709814/1160236
因此,我们可以制定一条可以为我们添加新样式的指令.
So, we can make a directive which can take care of adding new styles for us.
import { Directive, Input, OnChanges, SimpleChanges, ElementRef } from '@angular/core';
@Directive({
selector: '[appProgressBarColor]'
})
export class ProgressBarColor implements OnChanges{
static counter = 0;
@Input() appProgressBarColor;
styleEl:HTMLStyleElement = document.createElement('style');
//generate unique attribule which we will use to minimise the scope of our dynamic style
uniqueAttr = `app-progress-bar-color-${ProgressBarColor.counter++}`;
constructor(private el: ElementRef) {
const nativeEl: HTMLElement = this.el.nativeElement;
nativeEl.setAttribute(this.uniqueAttr,'');
nativeEl.appendChild(this.styleEl);
}
ngOnChanges(changes: SimpleChanges): void{
this.updateColor();
}
updateColor(): void{
// update dynamic style with the uniqueAttr
this.styleEl.innerText = `
[${this.uniqueAttr}] .mat-progress-bar-fill::after {
background-color: ${this.appProgressBarColor};
}
`;
}
}
如您所见,我们在这里所做的只是创建一个新的HtmlStyleElement
并将其添加到host元素内.
as you can see that all that we are doing here is just making a new HtmlStyleElement
and adding it just inside the host element.
在updateColor()
方法中,我们正在更新附加的样式标签的innerText
.请注意,我们在此处使用具有唯一属性的属性选择器,以将样式范围最小化,仅适用于宿主.因为我们只想覆盖应用了指令的进度条的样式.
And inside updateColor()
method we are updating the innerText
of the style tag we have appended. notice that we are using an attribute selector here with a unique attribute to minimize the scope of the style to the host only. because we want to override the style only for that progress-bar on which we have applied our directive.
您可以像这样在模板中使用此指令.
you can use this directive in your template like this.
<mat-progress-bar [appProgressBarColor]="'orange'"
mode="determinate"
value="40"></mat-progress-bar>
我希望这会有所帮助.
这篇关于从代码更改角度材料进度条颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!