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属性（即'color'，'background'等），将值作为主题和/或调色板和/或要使用的色调。< / p>

Source Docs

Answer 2

Angular Material的文档明确枚举了您可以区分md-theme属性的组件列表：

MD-按钮
  MD-复选框
  MD-进展圆形
  MD-进展线性
  MD-单选按钮
  MD-滑块
  MD-开关
  MD-标签
  MD-文本浮动
  MD-工具栏

来自Angular Material documentation，在主题/声明性语法下。

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

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：对不起英语，来自台湾：）

Answer 4

我认为唯一的方法是创建自己的自定义调色板，如文档中所示： https://material.angularjs.org/latest/#/Theming/03_configuring_a_theme 在定义自定义调色板的段落下。在那里你可以将'contrastDefaultColor'定义为浅或暗。如果我是对的，那就应该这样做。

但是，我想使用标准调色板并将文本颜色覆盖为光，而不是定义一个全新的调色板。

您也可以（我建议这样做）使用'extendPalette'扩展现有的调色板。这样您就不必定义所有色调，只需相应地设置'contrastDefaultColor'。

*编辑：刚试过一个解决方案

将此添加到您的配置功能（在上面提供的关于配置主题的链接上查找角度代码示例）

var podsharkOrange;

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

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

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

我只是将600 HUE设置为绿色以验证主题更改是否有效，因此您可以忽略extendPalette中的该行。

所以这只是将颜色改为浅色，而不是特定的颜色。所以它没有回答你的问题，但可能仍然派上用场。

Answer 5

最新版本为这个问题带来了好消息......此功能已添加到1.1.0-rc3（2016-04-13）版本中。它还不稳定，但我对它的第一次测试是令人满意的。

现在，您可以将mdColors指令和$ mdColors服务与主题结合使用，以实现您所寻找的目标。

请看一下：

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

查看公告，并在文档中查找mdColor指令和$ mdColor服务以获取一些示例。

Answer 6

这个答案已经过时请查看@factalspawn答案

纯粹的＆＃39;角质材料你不能。但您可以尝试使用此标记：https://gist.github.com/senthilprabhut/dd2147ebabc89bf223e7

Answer 7

github中存在一个问题，就像上面提到的那样 TitForTat在该问题上的评论几乎有完美的解决方案，但是它并没有与服装调色板一起使用，我在那里添加了评论固定解决方案，您可以查看： https://github.com/angular/material/issues/1269#issuecomment-124859026

Answer 8

Anchor element（）响应自version 1.0.0-rc1 $scope.AllCities = window.localStorage.getItem['all_cities'];后的Angular Material当前主题设置。

Answer 9

对我而言，我假设以md开头的所有内容 - 您只能将主题颜色应用于它们。

在文档中，有一些组件没有记录，您可以使用主题颜色。示例：

＆＃13;

'http://127.0.0.1/api/save/details'

＆＃13;

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

9 个答案: