web-dev-qa-db-fra.com

Matière angulaire couleur sur mesure mat-spinner

Est-ce que quelqu'un sait comment puis-je changer de couleur mat-spinner dans Angular Material? J'ai essayé de changer la couleur dans les fichiers de matériau, mais ils ne peuvent être importés, je ne peux rien y changer. Je veux que ce soit ma couleur personnalisée, et non une couleur de prébiult-themes.

cssangularangular-materialspinner
8
mavrise

Utilisez ce code pour ** <mat-spinner> ** ajoutez ce code dans votre fichier .css 

.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}
14
Nitin Wahale

Solution facile!

Ajouter des règles CSS personnalisées dans styles.css au lieu du fichier composant.css

.mat-progress-spinner circle, .mat-spinner circle {
    stroke: #2A79FF!important;
}
3
Debojyoti

La couleur est intégrée 

Theming La couleur de progress-spinner peut être changée en utilisant la propriété color. Par défaut, progress-spinners utilise la couleur primaire du thème. Ceci peut être changé en 'accent' ou 'avertir'.

https://material.angular.io/components/progress-spinner/overview

exemple

<mat-spinner color="warn"></mat-spinner>
1
Nour Lababidi

utiliser ce code

<md-progress-circular md-diameter="20px"></md-progress-circular>

md-progress-circular path {
  stroke: purple;
}
0
Mehrdad

Ceci est mieux réalisé en faisant un thème personnalisé. 

https://material.angular.io/guide/theming

0
GotStu

Cette réponse fonctionnera pour ceux qui recherchent une solution flexible dans Angular 4/6/7. Si vous ne voulez pas changer la couleur d'un tapis-spinner au niveau composant, vous devrez utiliser le sélecteur ::ng-deep . Sachant cela, la solution est assez simple. 

  • Dans votre fichier html:

    <div class="uploader-status">
        <mat-spinner></mat-spinner>
    </div>

  • Dans votre fichier css/scss:

    .uploader-status ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
        stroke: #000000;
    }
Notez que la classe .uploader-status css encapsule le composant. Vous pouvez simplement utiliser ::ng-deep sans utiliser de classe, mais les modifications que vous apportez à mat-spinner apparaîtront dans d'autres zones de l'application. Cochez ceci pour en savoir plus .

0
Erwol