md-color 设置悬停颜色 [英] md-color set hover color
本文介绍了md-color 设置悬停颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Angular Material 1.* 组件，我对此非常满意.
我想使用主题颜色来设置悬停状态背景，就像我为普通 所做的那样md-colors 背景，但找不到关于如何设置悬停状态颜色的任何文档.
有谁知道这是否可能以及如何做到?
解决方案
如果你查看angular materials library的colors.js文件，你会发现没有一个选项可以让我们配置hover效果状态:
>
/*** @ngdoc 指令* @name mdColors* @module material.components.colors** @限制A** @描述* `mdColors` 指令将应用基于主题的颜色表达式作为 RGBA CSS 样式值.** 格式将类似于我们在 scss 文件中定义的颜色:** ## `[?theme]-[palette]-[?hue]-[?opacity]`* - [theme] - 默认值是默认主题* - [调色板] - 可以是调色板名称或主要/重音/警告/背景* - [hue] - 默认为 500(hue-x 可以与主要/重点/警告/背景一起使用)* - [不透明度] - 默认为 1** >`?` 表示可选参数** @用法* <hljs lang="html">* <div md-colors="{background: 'myTheme-accent-900-0.43'}">* <div md-colors="{color: 'red-A100', 'border-color': 'primary-600'}">* <span>颜色演示</span>* </div>* </div>* </hljs>** `mdColors` 指令将自动观察表达式的变化，如果它识别出一个插值* 表达式或函数.对于性能选项，您可以在 `md-colors` 表达式中使用 `::` 前缀* 表示一次性数据绑定.* <hljs lang="html">* <md-card md-colors="::{background: '{{theme}}-primary-700'}">* </md-card>* </hljs>**/函数 MdColorsDirective($mdColors, $mdUtil, $log, $parse) {返回 {限制:'A'，要求:['^?mdTheme']，编译:函数(tElem，tAttrs){var shouldWatch = shouldColorsWatch();返回函数(范围，元素，属性，ctrl){var mdThemeController = ctrl[0];var lastColors = {};var parseColors = 函数(主题){如果(主题类型！=='字符串'){主题 = '';}如果(！attrs.mdColors){attrs.mdColors = '{}';}/*** Json.parse() 不起作用，因为键没有被引用；* 使用 $parse 转换为哈希映射*/var 颜色 = $parse(attrs.mdColors)(scope);/*** 如果 mdTheme 定义了 DOM 树* 我们为未指定主题的颜色添加了 mdTheme 主题** # 例子* <hljs lang="html">* <div md-theme="myTheme">* <div md-colors="{background: 'primary-600'}">* <span md-colors="{background: 'mySecondTheme-accent-200'}">颜色演示</span>* </div>* </div>* </hljs>** 'primary-600' 将是 'myTheme-primary-600',* 但 'mySecondTheme-accent-200' 将保持不变，因为它有一个主题前缀*/如果(mdThemeController){Object.keys(colors).forEach(function (prop) {var 颜色 = 颜色 [prop];如果 (!$mdColors.hasTheme(color)) {颜色[prop] = (theme || mdThemeController.$mdTheme) + '-' + color;}});}清洁元素(颜色)；返回颜色；};var cleanElement = 函数(颜色){如果 (!angular.equals(colors, lastColors)) {var keys = Object.keys(lastColors);如果(lastColors.background && !keys.color){keys.push('颜色');}键.forEach(功能(键){element.css(key, '');});}lastColors = 颜色；};/*** 注册 mgTheme 更改并要求 mdTheme 控制器在主题更改时运行我们的回调*/var unregisterChanges = angular.noop;如果(mdThemeController){unregisterChanges = mdThemeController.registerChanges(function (theme) {$mdColors.applyThemeColors(element, parseColors(theme));});}scope.$on('$destroy', function () {注销变更()；});尝试 {如果(应该){scope.$watch(parseColors, angular.bind(this,$mdColors.applyThemeColors，元素)， 真的);}别的 {$mdColors.applyThemeColors(element, parseColors());}}抓住 (e) {$log.error(e.message);}};函数 shouldColorsWatch() {//模拟 1x 绑定并标记 mdColorsWatch == falsevar rawColorExpression = tAttrs.mdColors;var bindOnce = rawColorExpression.indexOf('::') >-1;var isStatic = bindOnce ?真:STATIC_COLOR_EXPRESSION.test(tAttrs.mdColors);//为 postLink 删除它...tAttrs.mdColors = rawColorExpression.replace('::', '');var hasWatchAttr = angular.isDefined(tAttrs.mdColorsWatch);返回 (bindOnce || isStatic) ?错误的 :hasWatchAttr ?$mdUtil.parseAttributeBoolean(tAttrs.mdColorsWatch):真；}}};}I am working with Angular Material 1.* components and I am pretty happy about it.
I would like to use theme colors to set hover state background like I do for normal md-colors background, but can't find any documentation on how to set color for hover state.
Does anyone know is it possible and how to do it?
解决方案
if you look the file colors.js of angular materials library , you will discover that there is not an option which let us configured the hover effect state :
/**
* @ngdoc directive
* @name mdColors
* @module material.components.colors
*
* @restrict A
*
* @description
* `mdColors` directive will apply the theme-based color expression as RGBA CSS style values.
*
* The format will be similar to our color defining in the scss files:
*
* ## `[?theme]-[palette]-[?hue]-[?opacity]`
* - [theme] - default value is the default theme
* - [palette] - can be either palette name or primary/accent/warn/background
* - [hue] - default is 500 (hue-x can be used with primary/accent/warn/background)
* - [opacity] - default is 1
*
* > `?` indicates optional parameter
*
* @usage
* <hljs lang="html">
* <div md-colors="{background: 'myTheme-accent-900-0.43'}">
* <div md-colors="{color: 'red-A100', 'border-color': 'primary-600'}">
* <span>Color demo</span>
* </div>
* </div>
* </hljs>
*
* `mdColors` directive will automatically watch for changes in the expression if it recognizes an interpolation
* expression or a function. For performance options, you can use `::` prefix to the `md-colors` expression
* to indicate a one-time data binding.
* <hljs lang="html">
* <md-card md-colors="::{background: '{{theme}}-primary-700'}">
* </md-card>
* </hljs>
*
*/
function MdColorsDirective($mdColors, $mdUtil, $log, $parse) {
return {
restrict: 'A',
require: ['^?mdTheme'],
compile: function (tElem, tAttrs) {
var shouldWatch = shouldColorsWatch();
return function (scope, element, attrs, ctrl) {
var mdThemeController = ctrl[0];
var lastColors = {};
var parseColors = function (theme) {
if (typeof theme !== 'string') {
theme = '';
}
if (!attrs.mdColors) {
attrs.mdColors = '{}';
}
/**
* Json.parse() does not work because the keys are not quoted;
* use $parse to convert to a hash map
*/
var colors = $parse(attrs.mdColors)(scope);
/**
* If mdTheme is defined up the DOM tree
* we add mdTheme theme to colors who doesn't specified a theme
*
* # example
* <hljs lang="html">
* <div md-theme="myTheme">
* <div md-colors="{background: 'primary-600'}">
* <span md-colors="{background: 'mySecondTheme-accent-200'}">Color demo</span>
* </div>
* </div>
* </hljs>
*
* 'primary-600' will be 'myTheme-primary-600',
* but 'mySecondTheme-accent-200' will stay the same cause it has a theme prefix
*/
if (mdThemeController) {
Object.keys(colors).forEach(function (prop) {
var color = colors[prop];
if (!$mdColors.hasTheme(color)) {
colors[prop] = (theme || mdThemeController.$mdTheme) + '-' + color;
}
});
}
cleanElement(colors);
return colors;
};
var cleanElement = function (colors) {
if (!angular.equals(colors, lastColors)) {
var keys = Object.keys(lastColors);
if (lastColors.background && !keys.color) {
keys.push('color');
}
keys.forEach(function (key) {
element.css(key, '');
});
}
lastColors = colors;
};
/**
* Registering for mgTheme changes and asking mdTheme controller run our callback whenever a theme changes
*/
var unregisterChanges = angular.noop;
if (mdThemeController) {
unregisterChanges = mdThemeController.registerChanges(function (theme) {
$mdColors.applyThemeColors(element, parseColors(theme));
});
}
scope.$on('$destroy', function () {
unregisterChanges();
});
try {
if (shouldWatch) {
scope.$watch(parseColors, angular.bind(this,
$mdColors.applyThemeColors, element
), true);
}
else {
$mdColors.applyThemeColors(element, parseColors());
}
}
catch (e) {
$log.error(e.message);
}
};
function shouldColorsWatch() {
// Simulate 1x binding and mark mdColorsWatch == false
var rawColorExpression = tAttrs.mdColors;
var bindOnce = rawColorExpression.indexOf('::') > -1;
var isStatic = bindOnce ? true : STATIC_COLOR_EXPRESSION.test(tAttrs.mdColors);
// Remove it for the postLink...
tAttrs.mdColors = rawColorExpression.replace('::', '');
var hasWatchAttr = angular.isDefined(tAttrs.mdColorsWatch);
return (bindOnce || isStatic) ? false :
hasWatchAttr ? $mdUtil.parseAttributeBoolean(tAttrs.mdColorsWatch) : true;
}
}
};
}
这篇关于md-color 设置悬停颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
