我想将一句话中的一个词设置为md-primary颜色,另一个词设置为强调颜色。我认为应该像这样:
<div>
Hello <span class="md-primary">friend</span>.
How are <span class="md-accent">you</span>?
</div>
但是那些课程只适用于某些指定的组件。
如何做到呢?
我想将一句话中的一个词设置为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-class
一样使用md-colors
指令:
<span md-colors="{color:'primary'}">...</span>
以上代码将把文本颜色设置为主要颜色。传递给 md-colors
的对象使用键作为css属性(即'color','background'等),值作为您要使用的主题和/或调色板和/或色调。
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文档的“主题/声明性语法”章节。
因此,我的想法是:你不能这样做。
编辑于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>
它能正常工作。
注:抱歉我的英文不太好,我来自台湾 :)
var podsharkOrange;
podsharkOrange = $mdThemingProvider.extendPalette('orange', {
'600': '#689F38',
'contrastDefaultColor': 'light'
});
$mdThemingProvider.definePalette('podsharkOrange', podsharkOrange);
$mdThemingProvider.theme('default').primaryPalette('podsharkOrange', {
'default': '600'
});
https://github.com/angular/material/blob/master/CHANGELOG.md#110-rc3-2016-04-13
要查看公告,请查看文档中的mdColor指令和$mdColor服务的一些示例。
在 GitHub 上有一个讨论了这个问题,就像上面提到的那样, TitForTat 在那个问题中的评论几乎有完美的解决方案, 但它不能与自定义调色板一起使用,我在那里添加了一个带有修复方案的评论,你可以查看一下: https://github.com/angular/material/issues/1269#issuecomment-124859026
此答案已过时,请查看@factalspawn的答案
使用“纯”angular-material是不行的。但你可以尝试使用这个:https://gist.github.com/senthilprabhut/dd2147ebabc89bf223e7
自从版本1.0.0-rc1
: https://github.com/angular/material/blob/master/CHANGELOG.md#110-rc1-2016-03-09,锚元素()已经开始响应Angular Material当前的主题设置。
对我来说,以 md- 开头的所有内容都可以应用主题颜色。
在文档中有一些未记录的组件可以使用主题颜色。 例如:
<md-subheader class="md-warn"> my subheader </md-subheader>
<md-icon class="md-accent"> </md-icon>