md-color set hover color

Question

私は角度素材1で作業しています。

ホバー状態の背景を設定するためにテーマの色を使用したいと思います。ホバーの背景色を設定する方法についてはドキュメントを見つけることができません。

誰でも知っていますか、それを行う方法はありますか？

Answer 1

あなたは、角材料ライブラリのファイルcolors.jsを見れば、あなたは私たちがホバー効果の状態を設定してみましょうオプションが存在しないことを発見するでしょう：

 /** 
    * @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; 
     } 
     } 
    }; 

    } 

Answer 2

私が設定することで、回避策を作成しました背景色をmd色で表示し、別の要素の後ろに隠します。ホバー状態は、最上位層を透明にするので、動的に設定されたホバー状態であるように見えます。 は、ここでこの答えを参照してください：

https://stackoverflow.com/a/46650109/4881971

Answer 3

CSSのホバー状態のためのサポートはありませんが、あなたは角度でNG-MouseEnterイベントとmouseleaveでそれをシミュレートすることができます。要素に適用されるこれらのディレクティブの組み合わせのような

何か：

md-colors="{backgroundColor: hover ? '{{$ctrl.theme}}-warn' : '{{$ctrl.theme}}-background'}" 
ng-mouseenter="hover = true" 
ng-mouseleave="hover = false" 

の$ ctrl.themeは、あなたの現在のテーマのための文字列です。 hoverプロパティを$ scopeに登録することで、md-colorsディレクティブに渡す色のコントロールとして使用できます。