eckigen Material Design - Hinzufügen von benutzerdefinierten Schaltfläche Farbe

Question

Ich möchte meine eigenen benutzerdefinierten Farben, ähnlich wie "primäre", "warnen" etc. zum Beispiel habe ich eine Klasse für orange Hintergrund, aber ich verwende es als eine Klasse und nicht Farbattribut. Es funktioniert, aber der Code sieht verwirrend aus.

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

Was benötige ich color="orange" hinzufügen zu tun?

Answer 1

Sie können die Farbe der Schaltfläche nur eine Klasse für die Hintergrundfarbe orange in der normalen CSS Weise ändern, indem Sie definieren und als Klasse-Attribut.

Wenn Sie es als Farbe verwenden müssen = "Orange". Dann müssen Sie Ihr eigenes Thema mit den Farben erstellen, die Sie benötigen. Wie es geht, erfahren Sie unter Theming your angular material app. Sie können es sogar für jedes Element individuell gestalten. Durch customisation können Sie verschiedene Themen basierend auf Elementen wählen

Aber immer noch können Sie es nicht wie color = "orange" verwenden, können Sie Orange als Ihre primäre oder Asset-Farbe definieren und es als color = "primary" oder verwenden color = "Asset" basierend auf Ihrem Bedarf.

Theme kann nur folgende Produkte mit verschiedenen Farben haben

• Eine primäre Palette: Farben am häufigsten auf allen Bildschirmen und Komponenten verwendet.
• Eine Akzentpalette: Farben, die für die Floating-Action-Schaltfläche und interaktive Elemente verwendet werden.
• Eine Warnen-Palette: Farben, die verwendet werden, um den Fehlerzustand zu übermitteln.
• Eine Vordergrundpalette: Farben für Text und Symbole.
• Eine Hintergrundpalette: Farben für Elementhintergründe.

Answer 2

einen Stylesheet an dem auf Komponentenebene verwiesen Mit

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

Hinweis: Um den Sheet Bezug auf Komponentenebene erklären. LIVE DEMO

Answer 3

Sie können wie jede Farbe hinzufügen unter

<a mat-mini-fab [color]="'success'" routerLink=".">link</a>

es erzeugt die Klasse mit diesem Wert wie 'mat-Erfolg' dann CSS erstellen für diese Klasse

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

Answer 4

Thi Die Antwort erfolgt im Kontext eines eckigen 5.1.1-Projekts mit eckigem/cli und eckigem Material 5.1.

Die Matte -... scheint seine Farbe vom Elternteil zu erben. Wenn Sie also mit einem Span oder Div umgeben und die Farbe dort anwenden, sollte sie durchfallen. In meinem speziellen Anwendungsfall wollten wir die Farbe der Icons dynamisch einstellen. Unsere erste Implementierung und neue Implementierung sind unten.

Diese Klassenzuweisung überschreibt die Matte-Icon-Klasse.Es scheint, dass diese Anwendung zu arbeiten, aber nicht mehr:

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

Jetzt können Sie wickeln:

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

Der erste Fall führen zu den Worten „Symbolnamen“ gefärbt, wie gewünscht, aber kein Symbol. Der zweite Fall führte zu dem gewünschten Verhalten.