Angular Material: Как изменить цвет фона для дорожки вращающегося мата - PullRequest
Новая
       18

Angular Material: Как изменить цвет фона для дорожки вращающегося мата

0 голосов
/ 21 октября 2019

Я создал вращающуюся матрицу, изменил цвет обводки, но мне нужно знать, как изменить 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 - желтый цвет ( нужно решение для этого )

1 Ответ

2 голосов
/ 22 октября 2019

Круг создается динамически, поэтому вы не найдете свойства, чтобы закрасить оставшуюся часть (так как эта оставшаяся часть вообще не закрашена - там нет ничего, что мы могли бы изменить цвет);

Но вы можете получить эффект, который вы ищете ... вы можете сделать это:

  • , создав изображение полного круга, поместив его в mat-card ... Я взял следующее фиолетовое изображение

enter image description here

  • Далее, поместив mat-spinner поверх этого статического изображения через position:absolute

релевантно 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%;
}

выполнено работаетстекблиц здесь

...