AngularJS Material design - 按钮悬停时的 md-colors [英] AngularJS Material design - md-colors on button hover
问题描述
Angular Material 非常适合创建以颜色为主题的网站.与通常的调色板一样,您可以在没有 SCSS 的情况下创建动态主题,使用类似...
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 或类似于 悬停 状态?
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;
}
这是一个为您设置的代码笔: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 布局如下所示:
the html layout looks like this :
<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 Material design - 按钮悬停时的 md-colors的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!