簡體   English   中英

Angular 材質:如何更改墊子微調器路徑的背景顏色

[英]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:absolutemat-spinner放置在此 static 圖像之上

相關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%;
}

在這里完成工作堆棧閃電戰

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM