如何在Angular-Material中设置文字颜色?
How to set text color in Angular-Material?
我想将一个句子中的一个词设置为md-primary color,另一个词设置为accent color。我假设是这样的:
<div>
Hello <span class="md-primary">friend</span>.
How are <span class="md-accent">you</span>?
</div>
但是那些 类 仅适用于某些指定的组件。
有什么方法可以做到?
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 documentation,在主题/声明语法下。
所以我认为简短的回答是:你做不到。
2015 年 7 月 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 and/or 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: 对不起英语,来自台湾:)
对我来说,我假设所有以 md 开头的东西 - 你只能为它们应用主题颜色。
文档中有一些未记录的组件,您可以在这些组件中使用主题颜色。
示例:
<md-subheader class="md-warn"> my subheader </md-subheader>
<md-icon class="md-accent"> </md-icon>
此答案已过时,请检查@factalspawn 答案
'pure' angular-material 你不能。但是你可以尝试使用这个:https://gist.github.com/senthilprabhut/dd2147ebabc89bf223e7
github 中有一个问题讨论了这个问题,如上所述
TitForTat在那期的评论几乎完美解决了,
但它不适用于服装调色板,我在那里添加了一条评论
固定的解决方案,你可以看看:
https://github.com/angular/material/issues/1269#issuecomment-124859026
我认为唯一的方法是创建您自己的自定义调色板,如文档中所示:
https://material.angularjs.org/latest/#/Theming/03_configuring_a_theme
在定义自定义调色板段落下。
在那里你可以定义 'contrastDefaultColor' 为浅色或深色。
如果我是正确的,那就应该这样做。
但是,我想使用标准调色板并将文本颜色覆盖为浅色,而不是定义一个全新的调色板。
您也可以(我会建议这样做)使用 'extendPalette' 扩展现有的调色板。这样您就不必定义所有色调,而只需相应地设置 'contrastDefaultColor'。
*编辑:刚刚测试了一个解决方案
将此添加到您的配置函数(在上面提供的关于配置主题的 link 上查找 angular 代码示例)
var podsharkOrange;
podsharkOrange = $mdThemingProvider.extendPalette('orange', {
'600': '#689F38',
'contrastDefaultColor': 'light'
});
$mdThemingProvider.definePalette('podsharkOrange', podsharkOrange);
$mdThemingProvider.theme('default').primaryPalette('podsharkOrange', {
'default': '600'
});
我只是将 600 HUE 设置为绿色以验证主题更改是否有效,因此您可以忽略 extendPalette 中的那一行。
所以这只是将颜色更改为浅色,而不是特定颜色。所以它没有回答你的问题,但可能仍然会派上用场。
最新位为这个问题带来了好消息...此功能已添加到 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 服务以获取一些示例。
自 version 1.0.0-rc1
以来,锚元素 () 正在对 Angular Material 当前主题设置做出反应:https://github.com/angular/material/blob/master/CHANGELOG.md#110-rc1-2016-03-09。
我只能使用 Angular Material 1.1.0 来做到这一点。
您使用 md-colors
指令类似于 ng-class
:
<span md-colors="{color:'primary'}">...</span>
以上代码会将文本着色为原色。您传递给 md-colors
的对象使用键作为 css 属性(即 'color'、'background' 等)并将值作为主题 and/or 调色板 and/or 您要使用的色调。
我想将一个句子中的一个词设置为md-primary color,另一个词设置为accent color。我假设是这样的:
<div>
Hello <span class="md-primary">friend</span>.
How are <span class="md-accent">you</span>?
</div>
但是那些 类 仅适用于某些指定的组件。
有什么方法可以做到?
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 documentation,在主题/声明语法下。
所以我认为简短的回答是:你做不到。
2015 年 7 月 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 and/or 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: 对不起英语,来自台湾:)
对我来说,我假设所有以 md 开头的东西 - 你只能为它们应用主题颜色。
文档中有一些未记录的组件,您可以在这些组件中使用主题颜色。 示例:
<md-subheader class="md-warn"> my subheader </md-subheader>
<md-icon class="md-accent"> </md-icon>
此答案已过时,请检查@factalspawn 答案
'pure' angular-material 你不能。但是你可以尝试使用这个:https://gist.github.com/senthilprabhut/dd2147ebabc89bf223e7
github 中有一个问题讨论了这个问题,如上所述 TitForTat在那期的评论几乎完美解决了, 但它不适用于服装调色板,我在那里添加了一条评论 固定的解决方案,你可以看看: https://github.com/angular/material/issues/1269#issuecomment-124859026
我认为唯一的方法是创建您自己的自定义调色板,如文档中所示: https://material.angularjs.org/latest/#/Theming/03_configuring_a_theme 在定义自定义调色板段落下。 在那里你可以定义 'contrastDefaultColor' 为浅色或深色。 如果我是正确的,那就应该这样做。
但是,我想使用标准调色板并将文本颜色覆盖为浅色,而不是定义一个全新的调色板。
您也可以(我会建议这样做)使用 'extendPalette' 扩展现有的调色板。这样您就不必定义所有色调,而只需相应地设置 'contrastDefaultColor'。
*编辑:刚刚测试了一个解决方案
将此添加到您的配置函数(在上面提供的关于配置主题的 link 上查找 angular 代码示例)
var podsharkOrange;
podsharkOrange = $mdThemingProvider.extendPalette('orange', {
'600': '#689F38',
'contrastDefaultColor': 'light'
});
$mdThemingProvider.definePalette('podsharkOrange', podsharkOrange);
$mdThemingProvider.theme('default').primaryPalette('podsharkOrange', {
'default': '600'
});
我只是将 600 HUE 设置为绿色以验证主题更改是否有效,因此您可以忽略 extendPalette 中的那一行。
所以这只是将颜色更改为浅色,而不是特定颜色。所以它没有回答你的问题,但可能仍然会派上用场。
最新位为这个问题带来了好消息...此功能已添加到 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 服务以获取一些示例。
自 version 1.0.0-rc1
以来,锚元素 () 正在对 Angular Material 当前主题设置做出反应:https://github.com/angular/material/blob/master/CHANGELOG.md#110-rc1-2016-03-09。
我只能使用 Angular Material 1.1.0 来做到这一点。
您使用 md-colors
指令类似于 ng-class
:
<span md-colors="{color:'primary'}">...</span>
以上代码会将文本着色为原色。您传递给 md-colors
的对象使用键作为 css 属性(即 'color'、'background' 等)并将值作为主题 and/or 调色板 and/or 您要使用的色调。