Tôi đang làm việc với Angular Material 1. * components và tôi khá hài lòng về nó.md-color set hover color
Tôi muốn sử dụng màu chủ đề để đặt nền trạng thái di chuột như tôi làm cho nền md-colors bình thường, nhưng không thể tìm thấy bất kỳ tài liệu nào về cách đặt màu cho trạng thái di chuột.
Có ai biết là có thể không và cách thực hiện?
nếu bạn nhìn colors.js tập tin của thư viện tài liệu góc cạnh, bạn sẽ khám phá ra rằng có không phải là một lựa chọn mà chúng ta cấu hình tình trạng hiệu lực thi hành di chuột:
/**
* @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;
}
}
};
}
Tôi tạo ra một công việc xung quanh bằng cách thiết lập màu nền với md-màu sắc, và ẩn nó đằng sau một yếu tố khác. Trạng thái di chuột sau đó làm cho lớp trên cùng trong suốt, do đó, nó dường như là trạng thái di chuột được thiết lập động! Xem câu trả lời này ở đây:
Mặc dù không có sự hỗ trợ cho trạng thái hover trong css, bạn có thể mô phỏng nó với ng-MouseEnter và MouseLeave với góc.
Cái gì đó như một sự kết hợp của các chỉ thị áp dụng cho phần tử:
md-colors="{backgroundColor: hover ? '{{$ctrl.theme}}-warn' : '{{$ctrl.theme}}-background'}"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false"
đâu $ ctrl.theme là một chuỗi cho chủ đề hiện tại của bạn. Bằng cách đăng ký thuộc tính hover trong phạm vi $ bạn có thể sử dụng nó như một điều khiển cho màu sắc để truyền trong chỉ thị md-colors.