AngularJS材质设计-按钮悬停处的md-colors [英] AngularJS Material design - md-colors on button hover

问题描述

Angular Material非常适合创建以颜色为主题的网站.和通常的调色板一样，您也可以使用...

Angular Material is awesome for creating colour-themed sites. As well is the usual palettes, you can create dynamic themes without SCSS, using directives like...

md-colors="{background:'primary'}"

...设置任何元素的主题颜色.使用几行这样的代码，您可以轻松更改整个网站的颜色，或根据数据动态设置它:

...to set the theme colour of any element. With a few lines of code like this, you can easily change the colour of your whole site, or set it dynamically from data:

.config(function($mdThemingProvider) {
    var color = 'pink';
    $mdThemingProvider.theme('dark')
      .primaryPalette(color)
      .dark()
      ;

我的网站上有一些需要悬停状态的自定义元素，理想的情况是将这些颜色显示为强调色或原色. 但是有没有办法将 md-colors 或类似的颜色应用到 hover 状态?

My site has a few custom elements which require hover states, and the ideal thing would be to have these light up in the accent colour or primary colour. But is there a way to apply md-colors or similar to a hover state?

我的常规悬停状态在CSS中看起来像这样:

My conventional hover states look like this in CSS, of course :

.post a:hover{
  background-color:#f00;
}

这是一个设置为您可以使用的codepen: https://codepen.io/anon /pen/PJRzOQ

Here is a codepen set up for you to play with : https://codepen.io/anon/pen/PJRzOQ

推荐答案

如果有人不顾一切地将md-colors用作悬停状态，则根据文档，这是不可能的.但是我通过使用md-colors设置背景色并将其隐藏在另一个元素后面来创建了一种解决方法.然后，悬停状态使顶层透明，因此它似乎是动态设置的悬停状态！

In case anyone is desperate to use md-colors as a hover state, its not possible according to the docs. But I created a work-around by setting the background color with md-colors, and hiding it behind another element. The hover state then makes the top layer transparent, so it appears to be a dynamically set hover state!

您可以在此处查看示例:

You can see an example here:

https://codepen.io/anon/pen/oGqPeE

html布局如下:

<ul ng-if="link" md-theme="myTheme">
<li ng-repeat="linkObj in link" md-colors="{background:'primary'}">
  <a ng-href="{{linkObj.link_url}}" target="_blank" md-colors="{background:'accent'}">          <span ng-bind="linkObj.link_title" md-colors="{color:'accent'}"></span>
  </a>
</li>
</ul>

这篇关于AngularJS材质设计-按钮悬停处的md-colors的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！