logo标签列表

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

angularjs-material
43

我想将一句话中的一个词设置为md-primary颜色，另一个词设置为强调颜色。我认为应该像这样：

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

但是那些课程只适用于某些指定的组件。

如何做到呢？

有什么反对在这些类上添加自己的CSS的吗？ - Dmitri Zaitsev
应该接受 @fractalspawn 的答案。 - Joshua Wooward
9个回答
64

我刚刚使用 Angular Material 1.1.0 实现了这一点。

您可以像使用 ng-class 一样使用md-colors指令:

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

以上代码将把文本颜色设置为主要颜色。传递给 md-colors 的对象使用键作为css属性（即'color'，'background'等），值作为您要使用的主题和/或调色板和/或色调。

源文件文档

太好了，很高兴知道这个存在。:) 不过看起来v1.1.0仍处于发布候选模式。 - Michael R
与其他建议相比，这样做要容易得多。 - John
2
Angular Material v1.1.0现已发布，对于任何正在阅读此内容并想了解的人来说。 - BobChao87
14

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文档的“主题/声明性语法”章节。

因此，我的想法是：你不能这样做。

除非您升级到最新的Angular Material 1.1.0版本，否则您将无法使用md-colors指令。请参考下一个答案以获取解决方法。 - activedecay
6

编辑于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}}'; }

将该代码插入到angular-material.js文件的第13783行。

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>

它能正常工作。

注：抱歉我的英文不太好，我来自台湾 :)

太棒了！那个 Github 评论和代码片段正好是我想要的。甚至可能值得将该链接移到您的回答顶部。 - morloch
3
我认为唯一的方法是按照文档中所示创建自定义的调色板： https://material.angularjs.org/latest/#/Theming/03_configuring_a_theme 在“定义自定义调色板”段落下，您可以定义 'contrastDefaultColor' 为浅色或深色。如果我没错的话，这样就可以解决问题了。
但是，我想使用标准的调色板并将文本颜色覆盖为浅色，而不是定义一个全新的调色板。
您还可以（我建议这样做）使用 'extendPalette' 扩展现有的调色板。这样，您就不必定义所有色调，而只需相应地设置 'contrastDefaultColor' 即可。
*编辑：刚刚测试了一种解决方案
将以下内容添加到您的配置函数中（在上面提供的链接中查找有关配置主题的 Angular 代码示例）。
var podsharkOrange;

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

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

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

我刚刚将600色调设置为绿色，以验证主题更改是否有效，因此您可以忽略扩展调色板中的那一行。这只是将颜色更改为浅色，而不是特定的颜色。因此，它并没有回答您的问题，但可能仍然有用。
这对我有帮助，即使它没有帮助到原帖作者。谢谢！ - Spencer
1
最新版本的更新为这个问题带来了好消息...这个功能已经添加到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服务的一些示例。

0

在 GitHub 上有一个讨论了这个问题，就像上面提到的那样， TitForTat 在那个问题中的评论几乎有完美的解决方案， 但它不能与自定义调色板一起使用，我在那里添加了一个带有修复方案的评论，你可以查看一下： https://github.com/angular/material/issues/1269#issuecomment-124859026

0
1
不是真的。Angular 1.1.0添加了md-color指令。请参见得票最高的答案。 - activedecay
0
-6

对我来说，以 md- 开头的所有内容都可以应用主题颜色。

在文档中有一些未记录的组件可以使用主题颜色。 例如：

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接