web-dev-qa-db-fra.com

Comment changer la couleur de angular icônes d'étape pas à pas matérielle

Dans le composant pas à pas de matériau angular, chaque étape est représentée par une icône dans un cercle. La couleur d'arrière-plan de ce cercle est définie quelle que soit la couleur principale du thème. Est-il possible de changer cette couleur à la couleur d'accent du thème? J'ai essayé de définir color="accent" sur les deux mat-horizontal-stepper composant et chaque mat-step composant, mais aucun n'a eu d'effet et je ne vois pas d'entrée de couleur dans la documentation.

angularangular-materialmaterial-design
5
phelhe

Il ne semble pas y avoir d'option pour changer la couleur de l'icône du stepper mat, vous pouvez utiliser ce CSS comme solution de contournement.

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

:: ng-deep est déconseillé et peut être supprimé, peut également être utilisé

ViewEncapsulation.None dans le décorateur de composants pour éviter d'utiliser :: ng-deep

Mise à jour avec solution au problème

exemple de fichier 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>

créer un fichier theme.scss et l'ajouter aux styles dans angular.json

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

note stepper prendra la couleur de la couleur primaire

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

La classe de thème personnalisée peut être utilisée dans toute l'application, il suffit d'envelopper n'importe quel composant matériel et d'utiliser l'attribut de couleur primaire, l'accent ou l'avertissement tel que défini dans la classe. Le composant enveloppé dans une classe personnalisée utilisera cette couleur, sinon la couleur est définie à partir du thème global.

10
Nenad Radak

À l'intérieur de votre fichier scss pour votre composant, procédez comme suit:

::ng-deep {
    .mat-focused .mat-form-field-label {
      color: green;
    }

    .mat-form-field-underline {
      background-color: green;
    }

    .mat-form-field-ripple {
      background-color: green;
    }
 }

Pourquoi vous devriez utiliser ng-deep au lieu de ViewEncapsulation.none

Désactivation de l'effet de ViewEncapsulation.None in Angular

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

1
devpato
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>
1
Sandro

En utilisant Ionic v4, dans mon cas, je viens d'ajouter (à l'intérieur: root):

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

Vers le fichier variables.scss.

0
RicardoVallejo