43

我想将句子中的一个单词设置为 md-primary 颜色，另一个单词设置为强调色。我假设是这样的：

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

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

有什么办法呢？

4

9 回答 9

64

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

您使用的md-colors指令类似于您的方式ng-class：

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

上面的代码会将文本着色为原色。您传递给的对象md-colors将键用作 css 属性（即“颜色”、“背景”等），将值用作您要使用的主题和/或调色板和/或色调。

源文档

于 2016-06-09T21:40:11.280 回答
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 文档，在 Theming / Declarative Syntax 下。

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

于 2015-02-25T21:10:31.513 回答
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}}'; }

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

于 2015-06-03T18:17:36.820 回答
3

我认为唯一的方法是创建自己的自定义调色板，如文档中所示： https ://material.angularjs.org/latest/#/Theming/03_configuring_a_theme 在定义自定义调色板段落下。在那里，您可以将“对比度默认颜色”定义为浅色或深色。如果我是正确的，那应该这样做。

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

您还可以（我建议这样做）使用“extendPalette”扩展现有调色板。这样您就不必定义所有色调，而只需相应地设置“对比度默认颜色”。

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

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

var podsharkOrange;

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

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

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

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

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

于 2015-08-24T01:16:29.117 回答
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 服务以获取一些示例。

于 2016-04-22T16:14:06.360 回答
0

此答案已过时，请检查@factalspawn 答案

使用“纯”角材料你不能。但你可以尝试使用这个：https ://gist.github.com/senthilprabhut/dd2147ebabc89bf223e7

于 2015-07-08T12:20:55.673 回答
0

锚元素 () 对 Angular Material 当前主题设置作出反应，因为version 1.0.0-rc1：https ://github.com/angular/material/blob/master/CHANGELOG.md#110-rc1-2016-03-09 。

于 2016-06-01T09:31:56.750 回答
0

github中有一个问题讨论了这个问题，就像上面提到的TitForTat在那个问题中的评论几乎有完美的解决方案，但它不适用于服装调色板，我在那里添加了一个带有固定解决方案的评论，你可以检查一下： https://github.com/angular/material/issues/1269#issuecomment-124859026

于 2015-07-25T16:27:57.627 回答
-6

对我来说，我假设所有以 md 开头的东西 - 你只能对它们应用主题颜色。

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

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

于 2015-07-03T10:57:56.447 回答