Angular Material:如何更改垫子微调器路径的背景颜色
Angular Material: How to change the background color for the mat spinner path
我创建了一个垫子进度微调器,更改了笔划的颜色,但需要知道如何更改剩余笔划路径的 CSS
我尝试更改颜色,但它改变了描边颜色。但是我找不到与路径 CSS 相关的任何内容。我可以看到只有在我们使用 mat-progress-spinner
时才会生成圆圈
<mat-progress-spinner [color]="'orange'" [mode]="'determinate'"
[diameter]="80" strokeWidth="5" [value]=" 70">
</mat-progress-spinner>
.mat-progress-spinner circle, .mat-spinner circle {
stroke: green;
}
.mat-progress-spinner path, .mat-spinner path {
stroke: red;
}
例如,上例中的值为 70,那么 70 应该用橙色映射,需要帮助了解如何为剩余的 30 个值显示不同的颜色
- 70 - 橙色
- 30 - 黄色(需要解决此问题)
圆圈是动态创建的,因此您找不到 属性 来为剩余部分着色(因为剩余部分根本没有绘制 - 那里没有任何东西可以更改颜色);
但是您可以获得您正在寻找的效果...您可以通过以下方式实现:
- 创建完整圆的图像,将其放入您的
mat-card
...我拍摄了以下紫色图像
- 接下来,通过
position:absolute
将 mat-spinner
放置在此静态图像之上
相关HTML:
<mat-card>
<mat-card-content>
<h2 class="example-h2">Result</h2>
<img src='https://i.stack.imgur.com/aNUGr.png' alt='background'/>
<mat-progress-spinner class="example-margin" [color]="color" [mode]="mode" [value]="value">
</mat-progress-spinner>
</mat-card-content>
</mat-card>
相关CSS:
mat-progress-spinner{
position: absolute;
top: 56px;
left: 19px;
}
circle{
stroke-width: 11%;
}
我创建了一个垫子进度微调器,更改了笔划的颜色,但需要知道如何更改剩余笔划路径的 CSS
我尝试更改颜色,但它改变了描边颜色。但是我找不到与路径 CSS 相关的任何内容。我可以看到只有在我们使用 mat-progress-spinner
时才会生成圆圈<mat-progress-spinner [color]="'orange'" [mode]="'determinate'"
[diameter]="80" strokeWidth="5" [value]=" 70">
</mat-progress-spinner>
.mat-progress-spinner circle, .mat-spinner circle {
stroke: green;
}
.mat-progress-spinner path, .mat-spinner path {
stroke: red;
}
例如,上例中的值为 70,那么 70 应该用橙色映射,需要帮助了解如何为剩余的 30 个值显示不同的颜色
- 70 - 橙色
- 30 - 黄色(需要解决此问题)
圆圈是动态创建的,因此您找不到 属性 来为剩余部分着色(因为剩余部分根本没有绘制 - 那里没有任何东西可以更改颜色);
但是您可以获得您正在寻找的效果...您可以通过以下方式实现:
- 创建完整圆的图像,将其放入您的
mat-card
...我拍摄了以下紫色图像
- 接下来,通过
position:absolute
将
mat-spinner
放置在此静态图像之上
相关HTML:
<mat-card>
<mat-card-content>
<h2 class="example-h2">Result</h2>
<img src='https://i.stack.imgur.com/aNUGr.png' alt='background'/>
<mat-progress-spinner class="example-margin" [color]="color" [mode]="mode" [value]="value">
</mat-progress-spinner>
</mat-card-content>
</mat-card>
相关CSS:
mat-progress-spinner{
position: absolute;
top: 56px;
left: 19px;
}
circle{
stroke-width: 11%;
}