如何在Angular-Material中设置文字颜色?

我想在一个句子中设置一个单词使其具有md-primary颜色,而另一个单词使用重音颜色。 我假设了这样的事情:

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

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

有什么办法呢?

我只是能够使用Angular Material 1.1.0来做到这一点。

你可以使用类似于ng-classmd-colors指令:

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

上面的代码会将文本的颜色设置为主要颜色。 您传递给md-colors的对象使用该键作为CSS属性(即“颜色”,“背景”等),并将该值作为要使用的主题和/或调色板和/或色调。

源文件

Angular Material的文档明确列举了组件列表,您可以使用md-theme属性来区分它们:

MD-button
MD-checkbox
MD-进展圆形
MD-进展线性
MD-单选button
MD-滑块
MD-开关
MD-标签
MD-文本浮动
MD-工具栏

在Theming / Declarative Syntax下使用Angular Material文档 。

所以我想简单的回答是: 你做不到。

编辑2015/07/23

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


我创build了一个模块:

 (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:对不起英文,来自台湾:)

我认为唯一的方法是创build自定义调色板,如定义自定义调色板的段落中的文档: https ://material.angularjs.org/latest/#/Theming/03_configuring_a_theme。 在那里你可以定义'contrastDefaultColor'是明亮的还是黑暗的。 如果我是正确的,那就应该这样做。

但是,我想要使用标准调色板并覆盖文本颜色来指示灯,而不是定义一个全新的调色板。

你也可以(而且我build议这样做)用“extendPalette”扩展现有的调色板。 这样你就不必定义所有的色调,只需要设置'contrastDefaultColor'。

*编辑:只是testing一个解决scheme

把这个添加到你的configuration函数中(查找关于configuration主题的链接上的angular码示例)

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

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

所以这只是改变了颜色,而不是一个特定的颜色。 所以它没有回答你的问题,但可能仍然派上用场。

最新的一点给这个问题带来好消息…这个function已经被添加到1.1.0-rc3(2016-04-13)版本。 目前还不稳定,但我的第一个testing是令人满意的。

现在,您可以将mdColors指令和$ mdColors服务与主题配合使用,以实现您要查找的内容。

请看看:

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

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

在github上有一个问题,就像上面提到的那样,TitForTat在这个问题上的评论几乎有完美的解决scheme,但是它不适用于服装调色板,我用一个固定的解决scheme添加评论,你可以看看: https://github.com/angular/material/issues/1269#issuecomment-124859026

锚元素()对version 1.0.0-rc1以来的angular度材质当前主题设置做出了反应: https : //github.com/angular/material/blob/master/CHANGELOG.md#110-rc1-2016-03-09 。

这个答案已经过时了,请检查@factalspawn的答案

用“纯”的angular材,你不能。 但是你可以试试这个: https : //gist.github.com/senthilprabhut/dd2147ebabc89bf223e7

对我来说,我认为所有以md开头的东西都只能应用主题颜色。

在文档中有一些组件没有logging在哪里可以使用主题颜色。 例:

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