web-dev-qa-db-fra.com

conception de matériau angulaire - ajout d'une couleur de bouton personnalisée

Je souhaite ajouter mes propres couleurs personnalisées, similaires à "primaire", "avertir", etc. . Par exemple, j'ai ajouté une classe pour le fond orange, mais je l'utilise comme attribut de classe et non de couleur. Cela fonctionne, mais le code semble déroutant. 

<button md-raised-button color="primary" class="btn-w-md ml-3 orange-500-bg"><i class="material-icons">description</i> Deactivate</button>

Que dois-je faire pour ajouter color="orange"?

angularmaterial-designangular-material2
6
Shaniqwa

Vous pouvez modifier la couleur du bouton uniquement de la manière css normale en définissant une classe pour la couleur d'arrière-plan orange et en l'utilisant comme attribut de classe.

Si vous avez besoin de l'utiliser en tant que color = "orange". Ensuite, vous devez créer votre propre thème avec les couleurs dont vous avez besoin. Reportez-vous Theming votre application de matériau angulaire sur la façon de le faire. Vous pouvez même le personnaliser pour chaque élément. À travers personnalisation vous pouvez choisir différents thèmes en fonction des éléments

Mais vous ne pourrez toujours pas l'utiliser comme color = "orange", vous pouvez définir l'orange comme couleur principale ou d'actif et l'utiliser comme color = "primaire" ou color = "actif" selon vos besoins.

Le thème ne peut avoir que les éléments suivants avec des couleurs différentes

  • Une palette principale: couleurs les plus largement utilisées sur tous les écrans et composants. 
  • Une palette d'accent: couleurs utilisées pour le bouton d'action flottante et les éléments interactifs.
  • Une palette d'avertissement: couleurs utilisées pour transmettre l'état d'erreur.
  • Une palette de premier plan: couleurs pour le texte et les icônes.
  • Une palette d'arrière-plan: couleurs utilisées pour les arrière-plans d'éléments.
11
Kowsalya

Vous pouvez ajouter n'importe quelle couleur comme ci-dessous

 <a mat-mini-fab [color]="'success'" routerLink=".">link</a>
il génère la classe avec cette valeur comme 'mat-success' puis crée css pour cette classe

.mat-success {
    background-color: green;
    color: #fff;
}

24
Gopi

Cette réponse s'inscrit dans le contexte d'un projet 5.1.1 angulaire utilisant un matériau angulaire/cli et angulaire 5.1.

Le tapis -... semble hériter de sa couleur du parent. Par conséquent, si vous entourez une étendue ou une division et appliquez la couleur à cet endroit, elle devrait tomber. Dans mon cas d'utilisation particulier, nous voulions définir de manière dynamique la couleur des icônes. Notre implémentation initiale et nouvelle implémentation sont ci-dessous.

Cette affectation de classe remplacera la classe mat-icon. Il semble que cette utilisation fonctionne mais ne fait plus:

<mat-icon [class]="custom-class">icon name</mat-icon>

Maintenant vous pouvez envelopper:

<span [class]="custom-class"><mat-icon>icon name</mat-icon></span>

Dans le premier cas, les mots "nom de l'icône" sont colorés à volonté, mais pas d'icône. Le deuxième cas conduit au comportement souhaité.

3
Matthew Bowers

Utilisation d'une feuille de style au niveau du composant référencé

.mat-button, .mat-raised-button{
    background-color:red;
}

Remarque: Déclarez la référence de la feuille de style au niveau du composant .LIVE DEMO

1
Aravind