Wie setze ich Textfarbe in Angular-Material?

Question

Ich möchte ein Wort in einem Satz setzen, um md-Primärfarbe zu haben, und ein anderes Wort, um die Akzentfarbe zu haben. Ich nahm etwas wie folgt aus:

<div> 
    Hello <span class="md-primary">friend</span>. 
    How are <span class="md-accent">you</span>? 
</div> 

Aber diese Klassen arbeiten nur für einige Komponenten angegeben.

Wie ist es zu machen?

Answer 1

Ich konnte dies nur mit Angular Material 1.1.0 tun.

Sie verwenden die md-colors Richtlinie ähnlich, wie man es ng-class:

<span md-colors="{color:'primary'}">...</span> 

Der obige Code der Text die Grundfarbe wird die Farbe. Das Objekt, das Sie an md-colors übergeben, verwendet den Schlüssel als CSS-Eigenschaft (d. H. "Farbe", "Hintergrund" usw.) und den Wert als Thema und/oder Palette und/oder Farbton, den Sie verwenden möchten.

Source Docs

Answer 2

Angular Material ‚s docs explizit Liste der Komponenten aufzählen, die Sie in der Lage mit md-theme Attribute unterscheiden:

md-Taste
md-Checkbox
md-progress-Kreis
md-Progress linear
md-radio-button
md-slider
md-Schalter
md-tabs
md-Text-float
md-Symbolleiste

Von Angular Material documentation unter Theming/deklarative Syntax.

Also ich denke, die kurze Antwort ist: können Sie es nicht tun.

Answer 3

EDITED 2015/07/23

TitForTat Kommentar hat eine bessere Lösung https://github.com/angular/material/issues/1269#issuecomment-121303016

---

ich ein Modul erstellt:

(function() { 
     "use strict"; 
     angular 
      .module('custiom.material', ['material.core']) 
      .directive('cMdThemeFg', ["$mdTheming", function ($mdTheming) { 
       return { 
        restrict: 'A', 
        link: postLink 
       }; 
       function postLink(scope, element, attr) { 
        $mdTheming(element); 
        element.addClass('c-md-fg'); 
       } 

      }]) 
      .directive('cMdThemeBg', ["$mdTheming", function ($mdTheming) { 
       return { 
        restrict: 'A', 
        link: postLink 
       }; 
       function postLink(scope, element, attr) { 
        $mdTheming(element); 
        element.addClass('c-md-bg'); 
       } 
      }]); 
    })(); 

und dann hängen Sie

.c-md-fg.md-THEME_NAME-theme.md-primary { color: '{{primary-color}}'; } 
.c-md-fg.md-THEME_NAME-theme.md-accent { color: '{{accent-color}}'; } 
.c-md-fg.md-THEME_NAME-theme.md-warn { color: '{{warn-color}}'; } 
.c-md-bg.md-THEME_NAME-theme.md-primary { background-color: '{{primary-color}}'; } 
.c-md-bg.md-THEME_NAME-theme.md-accent { background-color: '{{accent-color}}'; } 
.c-md-bg.md-THEME_NAME-theme.md-warn { background-color: '{{warn-color}}'; } 

in Winkel material.js bei 13783 Linie

angular.module("material.core").constant("...... HERE") 

Dann können, habe ich einfach c-md-Thema-fg und/oder C-md-Thema-bg zu Element gelten für Designfarben gelten. Gefällt mir:

<div c-md-theme-bg class="md-primary md-hue-3">dasdasdasd</div> 
<span c-md-theme-bg class="md-primary">test</span> 

Es funktioniert.

ps: sorry about Englisch, kommen aus Taiwan :)

Answer 4

Für mich ich alles übernehmen, die mit beginnt MD- Sie können nur Thema Farben für sie gelten.

In der Dokumentation gibt es einige Komponenten, die nicht dokumentiert sind, wo Sie Themenfarben verwenden können. Beispiel:

<md-subheader class="md-warn"> my subheader </md-subheader> 
 
<md-icon class="md-accent"> </md-icon>

Answer 5

Diese Antwort ist nicht aktuell Bitte

Mit 'reinen' Winkel Material, das Sie nicht können @factalspawn beantworten überprüfen. Aber man kann versuchen, diese usign: https://gist.github.com/senthilprabhut/dd2147ebabc89bf223e7

Answer 6

gibt es ein Problem in Github, die diese disccused, wie oben erwähnt TitForTat Kommentar in dieser Frage hatte fast die perfekte Lösung, , aber es funktioniert nicht mit Kostüme Paletten, mich hinzufügen Kommentar dort mit einer festen Lösung, können Sie sie überprüfen: https://github.com/angular/material/issues/1269#issuecomment-124859026

Answer 7

ich denke, der einzige Weg ist, Ihre eigene benutzerdefinierte Palette zu erstellen, wie in der Dokumentation gezeigt: https://material.angularjs.org/latest/#/Theming/03_configuring_a_theme unter dem Absatz definieren von benutzerdefinierter Palette. Dort können Sie 'contrastDefaultColor' definieren, um hell oder dunkel zu sein. Wenn ich richtig liege, sollte es das tun.

Allerdings möchte ich eine Standard-Palette verwenden und überschreiben die Textfarbe zu beleuchten, nicht eine ganz neue Palette zu definieren.

Sie können auch (und ich würde das vorschlagen) eine bestehende Palette um 'extendPalette' erweitern. Auf diese Weise müssten Sie nicht alle Farbtöne definieren, sondern nur "contrastDefaultColor" entsprechend einstellen.

* edit: nur eine Lösung getestet

dies zu Ihrer Konfigurationsfunktion hinzufügen (sucht Winkelcodebeispiel auf den Link oben angegebenen über Thema Konfiguration)

var podsharkOrange; 

podsharkOrange = $mdThemingProvider.extendPalette('orange', { 
    '600': '#689F38', 
    'contrastDefaultColor': 'light' 
}); 

$mdThemingProvider.definePalette('podsharkOrange', podsharkOrange); 

$mdThemingProvider.theme('default').primaryPalette('podsharkOrange', { 
    'default': '600' 
}); 

ich die 600 HUE auf eine gerade eingestellt grüne Farbe, um zu überprüfen, ob die Änderung des Themas funktioniert, sodass Sie diese Zeile in der extendPalette ignorieren können.

Also änderte dies nur die Farbe zu Licht, nicht eine bestimmte Farbe. So hat es deine Frage nicht beantwortet, aber könnte noch nützlich sein.

Answer 8

Die letzten Bits bringen gute Nachrichten zu diesem Problem ... Diese Funktion wurde der Version 1.1.0-rc3 (2016-04-13) hinzugefügt. Es ist noch nicht stabil, aber mein erster Test ist zufriedenstellend.

Jetzt können Sie die mdColors-Anweisung und $ mdColors-Dienst in Verbindung mit Themen verwenden, um zu erreichen, wonach Sie suchen.

Bitte nehmen Sie einen Blick auf:

https://github.com/angular/material/blob/master/CHANGELOG.md#110-rc3-2016-04-13

die Ankündigung, und suchen Sie die mdColor Richtlinie und $ mdColor Dienst in der Dokumentation für einige Beispiele zu sehen.

Answer 9

Das Ankerelement() reagiert auf die aktuelle Einstellung für das Winkelmaterial seit version 1.0.0-rc1: https://github.com/angular/material/blob/master/CHANGELOG.md#110-rc1-2016-03-09.