如何更改角材料步进器步骤图标的颜色 [英] How to change color of angular material stepper step icons

问题描述

在角度材料步进组件中，每个步骤都由一个圆圈中的图标表示.该圆圈的背景颜色设置为主题的主要颜色.是否可以将此颜色更改为主题的强调色?我尝试在 mat-h​​orizo​​ntal-stepper 组件和每个 mat-step 组件上设置 color="accent"，但都没有效果，我在文档中没有看到颜色输入.

解决方案

似乎没有改变 mat stepper icon 颜色的选项，你可以使用这个 css 作为解决方法.

 ::ng-deep .mat-step-header .mat-step-icon-selected {背景颜色:红色；}

::ng-deep 已弃用，可以删除，也可以使用

ViewEncapsulation.None 在组件装饰器中避免使用 ::ng-deep

更新并解决问题

html 文件示例

 
<----- 包装主题类<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-线性">{{!isLinear ?'启用线性模式' : '禁用线性模式'}}<mat-h​​orizo​​ntal-stepper [linear]="isLinear" #stepper><mat-step [stepControl]="firstFormGroup"><form [formGroup]="firstFormGroup"><ng-template matStepLabel>填写你的名字</ng-template><mat-form-field><input matInput placeholder="姓氏，名字"formControlName="firstCtrl" required></mat-form-field><div><button mat-button matStepperNext>Next</button>
</表单></mat-step><mat-step [stepControl]="secondFormGroup"><form [formGroup]="secondFormGroup"><ng-template matStepLabel>填写您的地址</ng-template><mat-form-field><input matInput placeholder="Address" formControlName="secondCtrl" required></mat-form-field><div><button mat-button matStepperPrevious>返回</button><button mat-button matStepperNext>Next</button>

</表单></mat-step><垫步><ng-template matStepLabel>完成</ng-template>你现在已经完成了.<div><button mat-button matStepperPrevious>返回</button><button mat-button (click)="stepper.reset()">重置</button>

</mat-step></mat-h​​orizo​​ntal-stepper>

创建 theme.scss 文件并将其添加到 angular.json 中的样式

 "样式": ["src/styles.css",源代码/主题.scss"]

注意步进器将采用原色

主题.scss

 @import '~@angular/material/theming';@include mat-core();.黄色主题{$yellow-theme-primary: mat-palette($mat-yellow, 400);$yellow-theme-accent: mat-palette($mat-yellow, 400);$yellow-theme: mat-light-theme($yellow-theme-primary, $yellow-theme-accent);@include angular-material-theme($yellow-theme);}

自定义主题类可以跨应用程序使用，只需包装任何材料组件并使用类中定义的颜色属性primary、accent 或warn.包装在自定义类中的组件将使用该颜色，如果不是从全局主题设置颜色.

In the angular material stepper component, each step is represented by an icon in a circle. The background color of this circle is set to whatever the theme's primary color is. Is it possible to change this color to the theme's accent color? I tried setting color="accent" on both the mat-horizontal-stepper component and each mat-step component, but neither one had any effect and I don't see a color input in the documentation.

解决方案

There does not seem to be option to change color of mat stepper icon, you can use this css as workaround.

 ::ng-deep .mat-step-header .mat-step-icon-selected {
    background-color: red; 
 }

::ng-deep is deprecated and can be removed, also can be used

ViewEncapsulation.None in component decorator to avoid using ::ng-deep

Update with solution to problem

html file example

 <div class="yellow-theme"> <----- wrapper theme class
     <button mat-raised-button (click)="isLinear = !isLinear" id="toggle- 
      linear">
            {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
          </button>
          <mat-horizontal-stepper [linear]="isLinear" #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">
              <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>

create theme.scss file and add it to styles in angular.json

 "styles": [
          "src/styles.css",
          "src/theme.scss"
           ]

note stepper will take color of primary color

theme.scss

 @import '~@angular/material/theming';
 @include mat-core();

 .yellow-theme {
     $yellow-theme-primary: mat-palette($mat-yellow, 400);
     $yellow-theme-accent:  mat-palette($mat-yellow, 400);

     $yellow-theme: mat-light-theme($yellow-theme-primary, $yellow-theme-accent);

     @include angular-material-theme($yellow-theme);
 }

Custom theme class can be used across application,just wrapp any material component and use color attribute primary,accent or warn as defined in class. Component that is wrapped in custom class wil use that color, if not color are set from global theme.

这篇关于如何更改角材料步进器步骤图标的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！