如何在Angular-Material中设置文本颜色？

Question

我想在一个句子中设置一个单词,使其具有md-primary颜色,另一个单词设置为具有强调颜色.我假设这样的事情:

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

但这些类仅适用于某些指定的组件.

这样做的方法是什么？

Answer 1

我只能使用Angular Material 1.1.0来做到这一点.

您可以使用md-colors类似于以下方式的指令ng-class:

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

上面的代码将为主要颜色的文本着色.传递给的对象md-colors使用键作为css属性(即"颜色","背景"等),将值作为主题和/或调色板和/或要使用的色调.

来源文件

Answer 2

Angular Material的文档显式枚举组件列表,您可以使用md-theme属性区分它们:

md-button
md-checkbox
md-progress-circular
md-progress-linear
md-radio-button
md-slider
md-switch
md-tabs
md-text-float
md-toolbar

来自Angular Material文档,在Theming/Declarative Syntax下.

所以我认为简短的回答是:你不能这样做.

Answer 3

编辑2015/07/23

TitForTat的评论有更好的解决方案 https://github.com/angular/material/issues/1269#issuecomment-121303016

我创建了一个模块:

(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');
                }
            }]);
    })();

然后追加

.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}}'; }

到13783行的angular-material.js

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

然后,我可以简单地将c-md-theme-fg和/或c-md-theme-bg应用于元素以应用主题颜色.像这样:

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

有用.

ps:抱歉英语,来自台湾:)