在
例如,此方法应返回一个由此主题中填充的所有调色板填充的对象。
编辑:使用示例
引用:
此示例不是美丽的代码设计,而是简单易懂的。
然后,我将能够在范围上公开它,并在其他(自定义或本机)指令中使用它。
angular-material
中,我们可以通过以下方式在Angular的config
块中定义颜色调色板:angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange');
});
这很棒......
但是
我找不到一种处理给定调色板当前颜色值的方法,只是为了在不匹配原生支持元素列表的元素(自定义或非自定义)上使用相同的颜色。
支持主题的元素有:
- md-button
- md-checkbox
- md-progress-circular
- md-progress-linear
- md-radio-button
- md-slider
- md-switch
- md-tabs
- md-text-float
- md-toolbar
参考 https://material.angularjs.org/latest/Theming/02_declarative_syntax
也许还有更多,但是肯定不支持自定义元素。
因此,如果我创建一个自定义DOM
元素,或嵌套元素(反正),如何应用当前默认主题下warn
调色板的当前700
值?
我在API中没有找到任何信息。
我寻找像以下这样可用的一个或多个方法的service
,例如:
$mdTheme.getTheme('default');
例如,此方法应返回一个由此主题中填充的所有调色板填充的对象。
编辑:使用示例
引用:
此示例不是美丽的代码设计,而是简单易懂的。
然后,我将能够在范围上公开它,并在其他(自定义或本机)指令中使用它。
// controller:
angular.module('myApp').controller('myCtrl',function($scope,$mdTheme){
var primary500 = $mdTheme.getTheme('default').getPalette('primary').getHue('500');
$scope.customStyleBorderPrimary = {
'border-bottom': 'solid 2px ' + primary500
};
}
然后
<!-- in view -->
<h4 ng-style="customStyleBorderPrimary" ng-controller="myCtrl">
My h4 title with primary border-bottom
</h4>