我无法设置图标颜色
我有一个带有五个垫子步骤的垫子 - 霍尼底型汤匙(例如,命名为A部分,B Part ... Part e(。每个部分(MAT-Step(可能会根据某些业务规则具有不同的颜色。
我知道如何更改"选定的"垫子步骤或如何更改所有垫子步骤(具有相同颜色(,但无法动态地更改它,以便每个部分都可能具有不同的图标背景颜色。
使用角V7
以下是设置第三个MAT步骤图标绿色的样式。ID确实有效,但我不如何从组件(Typescript(在运行时动态更改颜色。
::ng-deep .mat-step-header:nth-of-type(3) .mat-step-icon {
background-color: green!important;
}
我也尝试使用[ngClass]
,但是当用作MATSTEP属性时,它被忽略了。它只有在我将步骤标签封闭并在此处使用时才有效,但这不是要求(我需要更改图标的背景颜色...不是标签(。
预期结果:能够根据每个步骤的完成级别设置每个步骤。(垫子步长可以是黄色,红色,绿色和黑色的组合(,
实际结果:无法根据组件变量设置更改图标颜色
这个问题实际上是关于通过TS控制CSS变量 - 我在此处获得了这篇文章的帮助;
- CSS:我们将3个变量分配给我们需要彩色的3个图标
- html:我们创建了2个Divs
firstClass
&secondClass
除了<body>
之外,我们可以分配唯一命名的变量color1
,color2
和color3
; - 由于我们使用的是" Mat-table",因此我们不能使用
[ngStyle]
或[ngClass]
,因为材料元素是在运行时创建的,并且我们只能在其中任何一个AfterViewInit
事件上操作,因此我们在这里将值分配给我们的2个divs&amp;<body>
标签;
相关 CSS :
::ng-deep .mat-step-header:nth-of-type(1) .mat-step-icon {
background-color: var(--my-var1);
}
::ng-deep .mat-step-header:nth-of-type(2) .mat-step-icon {
background-color: var(--my-var2);
}
::ng-deep .mat-step-header:nth-of-type(3) .mat-step-icon {
background-color: var(--my-var3);
}
相关 html :
<div class='firstClass'>
<div class=' secondClass'>
<mat-horizontal-stepper labelPosition="bottom" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup" optional>
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>
<div>
<div>
相关 TS :
import {Component, OnInit,AfterViewInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'stepper-label-position-bottom-example',
templateUrl: 'stepper-label-position-bottom-example.html',
styleUrls: ['stepper-label-position-bottom-example.css'],
})
export class StepperLabelPositionBottomExample implements OnInit, AfterViewInit {
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
color1:string = 'green';
color2:string = 'yellow';
color3:string = 'red';
constructor(private _formBuilder: FormBuilder) {}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required]
});
}
ngAfterViewInit(){
document.querySelector("body").style.cssText = "--my-var1: "+this.color1;
(<HTMLElement>document.querySelector('.secondClass')).style.cssText = "--my-var2: "+this.color2;
(<HTMLElement>document.querySelector('.firstClass')).style.cssText = "--my-var3: "+this.color3;
}
}
在这里完成工作stacblitz