angulaire de la conception des matériaux - ajouter des boutons personnalisés de couleur

Je veux ajouter mes propres couleurs, semblables à des "primaires" , "avertir", etc.
par exemple, j'ai ajouté une classe pour fond orange, mais je l'utilise comme une classe et non la couleur de l'attribut. Il fonctionne, mais le code est source de confusion.

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

Tout simplement, vous ne pouvez pas ajouter color="orange". Vous avez à faire votre propre thème pour le faire.

OriginalL'auteur Shaniqwa | 2017-07-17

  1. 11

    Vous pouvez changer la couleur du bouton que dans la normale css façon par la définition d'une classe pour l'arrière-plan de couleur orange et en l'utilisant comme un attribut de classe.

    Si vous avez besoin de l'utiliser comme color="orange". Ensuite, vous devez créer votre propre thème avec les couleurs dont vous avez besoin. Reportez-vous Thématisation angulaire du matériel d'application sur la façon de le faire. Vous pouvez même en faire personnalisé pour chaque élément. Par personnalisation vous pouvez choisir différents thèmes basés sur des éléments

    Mais encore, vous ne serez pas en mesure de l'utiliser comme color="orange", vous pouvez définir orange comme votre principal ou de l'actif de la couleur et de l'utiliser comme couleur="principal" ou color="actif" en fonction de votre besoin.

    Thème peuvent avoir seulement à la suite d'articles de couleurs différentes

    • Primaire palette de couleurs: des couleurs plus largement utilisé sur tous les écrans et composants.
    • Un accent palette de couleurs: les couleurs utilisées pour le flottant sur le bouton d'action et des éléments interactifs.
    • Un avertir palette de couleurs: les couleurs utilisées pour transmettre un état d'erreur.
    • Une palette de premier plan: des couleurs pour le texte et les icônes.
    • Un arrière-plan de la palette: les couleurs utilisées pour l'élément de milieux.

    OriginalL'auteur Kowsalya

  2. 3

    Cette réponse, c'est dans le contexte d'une angulaires 5.1.1 projet à l'aide angulaire/cli et de la quantité de matériel 5.1.

    Le mat-... semble hériter de sa couleur, de son parent, si vous entourer avec un span ou div et appliquer la couleur là, il devrait tomber. Dans mon cas d'utilisation particulier, nous voulions définir dynamiquement la couleur des icônes. Notre mise en œuvre initiale et la nouvelle mise en œuvre sont ci-dessous.

    Cette classe attribution de remplacer le tapis-icône de la classe. Il semble que cette utilisation pour le travail, mais ne le 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>

    Le premier cas se traduire par les mots "nom de l'icône" couleur comme vous le souhaitez mais pas d'icône. Le deuxième cas se traduire par le comportement souhaité.

    OriginalL'auteur Matthew Bowers

  3. 1

    À l'aide d'une feuille de style à l'référencé au niveau du composant

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

    Remarque: Déclarer la feuille de style de référence au niveau du composant.
    DÉMONSTRATION EN DIRECT

    OriginalL'auteur Aravind