Как я могу изменить цвет обводки круга прогресса в нг-зорро? - PullRequest
Новая
       21

Как я могу изменить цвет обводки круга прогресса в нг-зорро?

0 голосов
/ 12 января 2019

В моем проекте Angular я имею в виду инструментальную панель, которая показывает мне различные круги процесса. В зависимости от прогресса я хочу изменить цвет линии.

Вот как это выглядит сейчас. how it looks Вот как это должно выглядеть. how it should look

К сожалению, я не могу изменить цвет с помощью, например, [nzStrokeColor] = "'red'". 

<div class="flex">
  <nz-card class="cards" *ngFor="let card of dashboarcard">
    <nz-card-meta [nzAvatar]="avatarTemplate" [nzTitle]="card.titel" nzDescription="12.01.2019"> </nz-card-meta>
    <ng-template #avatarTemplate>
      <nz-progress [nzStrokeColor]="'red'" [nzWidth]="40" nzType="circle" [nzPercent]="card.percent"></nz-progress>
    </ng-template>
  </nz-card>
</div>

Прямо сейчас это всегда синий, независимо от того, что я вхожу. Ты хоть представляешь, что я делаю не так?

Много приветствий,
Jin

1 Ответ

0 голосов
/ 12 января 2019

С ng-zorro-antd@1.8.1 вы не можете изменить stroke атрибут для svg:path.ant-progress-circle-path, так как он был добавлен только в 7.0.0-rc.0

Итак, я обновил ваш Stackblitz , и он на самом деле работает, как и предполагалось:

enter image description here

Как видите, атрибут stroke меняется на red НО

Атрибуты представления SVG имеют более низкий приоритет, чем другие правила стилей CSS, указанные в таблицах стилей автора или атрибутах "style" .

Это означает, что stroke="red" будет переопределено классом .ant-progress-circle-path, и это то, что мы видим на картинке выше.

Так что единственный способ переопределить это - переопределить этот класс.

Вот несколько способов сделать это:

1) Добавить переопределение к вашим глобальным стилям ( stackblitz )

styles.css 

path.ant-progress-circle-path { stroke:red }

Примечание: мы добавили элемент в класс, чтобы он имел более высокую специфичность, чем просто класс, поэтому нам не нужно !important здесь

2) Используйте комбинатор ::ng-deep в app.component.css ( stackblitz )

app.component.css 

::ng-deep .ant-progress-circle-path { stroke:red;}

3) Добавьте то же правило в app.component.css, предварительно установив encapsulation в ViewEncapsulation.None для компонента ( stackblitz )

app.component.ts 

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  {
...