Question

在角材步进器组件中，每个步骤都由一个圆圈图标表示。此圆圈的背景色设置为主题的原色。是否可以将此颜色更改为主题的强调色？我尝试在color="accent"组件和每个mat-horizontal-stepper组件上都设置mat-step，但是都没有任何作用，并且在文档中看不到颜色输入。

Answer 1

似乎没有改变垫子步进器图标颜色的选项，您可以使用此CSS作为解决方法。

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

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

在组件装饰器中

ViewEncapsulation.None 以避免使用:: ng-deep

更新问题解决方案

html文件示例

 <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>

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

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

注释步进器将采用原色

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);
 }

自定义主题类可以在整个应用程序中使用，只需包装任何材料组件，并使用类中定义的主，强调或警告颜色属性。如果不在全局主题中设置颜色，则包装在自定义类中的组件将使用该颜色。

Answer 2

在您的scss文件中，执行以下操作：

- name: "Create custom fact directory"
  file:
    path: "/etc/ansible/facts.d"
    state: "directory"

- name: "coping the custom fact file"
  copy:
    remote_src: yes
    src: /etc/default/locale
    dest: /etc/ansible/facts.d/locale.fact
    mode: '755'

- name: "gathering custom facts"
  setup:
    filter: ansible_local

- debug:
    var: ansible_local.locale

- name: "remove the custom fact directory"
  file:
    path: "/etc/ansible/facts.d"
    state: absent

为什么应使用ng-deep代替 ViewEncapsulation.none

Disabling effect of ViewEncapsulation.None in Angular

https://medium.com/ng-gotchas/piercing-the-angular-style-encapsulation-c7030caeb519

Answer 3

error = true;

    .preenchimento-incompleto {
      background-color: black !important;
    }

    .preenchimento-ok {
      background-color: greenyellow !important;
    }

<mat-step  id="idDadosPessoaisFormGroup5" name="idDadosPessoaisFormGroup5" [ngClass]="error ? 'preenchimento-incompleto' : 'preenchimento-incompleto'" [stepControl]="dadosPessoaisFormGroup">
        <form [formGroup]="dadosPessoaisFormGroup">
          <ng-template matStepLabel>DADOS<br> PESSOAIS</ng-template>
          <app-dados-pessoais [container]="stepper"></app-dados-pessoais>
        </form>
      </mat-step>

Answer 4

在我的情况下，使用Ionic v4（在：root内）：

  .mat-step-header .mat-step-icon-selected {
    background-color: var(--ion-color-primary);
  }

到variables.scss文件。

Answer 5

当然，您可以使用自己的 CSS 并自定义背景和前景色。不需要 ::ng-deep。 （/deep/ 和 ::ng-deep 目前都已弃用）

这里有几个 SCSS，这是我的步进器的外观：我添加了自定义标签和以下图标所需的 SASS 片段：

已完成的步骤及其标签：

.mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
  background-color: transparent !important;
  color: $success;
  +.mat-step-label{
    color: $success !important;
  }
}

进行中步骤及其标签：

.mat-step-header .mat-step-icon-selected{
  // background-color: $primary;
  background-color: transparent !important;
  color: $primary;
  +.mat-step-label{
    color: $primary !important;
  }
}

待办事项/默认步骤及其标签：

.mat-step-header .mat-step-label{
    color: rgba(0, 0, 0, .54)
}
.mat-step-header .mat-step-icon {
    color: rgba(0, 0, 0, .54);
    background-color: transparent;
}

用于覆盖默认图标的 HTML： 我使用字体真棒图标来覆盖默认值：

<mat-horizontal-stepper>
    <!-- Icon overrides. -->
    <ng-template matStepperIcon="edit">
        <i class="fa fa-check-circle"></i>
    </ng-template>
    <ng-template matStepperIcon="active">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
    <ng-template matStepperIcon="done">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
    <ng-template matStepperIcon="number">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
</mat-horizontal-stepper>

注意：所有 SCSS 都应该在全局样式表中，而不是在组件特定的样式表中。如果样式存在于 angular 组件的文件中，由于视图封装，它不会被应用。 >

如何更改角材步进器步骤图标的颜色

5 个答案: