Question

Angular Material非常适合创建以色彩为主题的网站。通常的调色板也是如此，你可以使用像......这样的指令创建没有SCSS的动态主题。

public Task SetPasswordHashAsync(TUser user, string passwordHash, CancellationToken cancellationToken)
{
    cancellationToken.ThrowIfCancellationRequested();

    if (user == null)
        throw new ArgumentNullException(nameof(user));

    user.PasswordHash = passwordHash;

    return Task.FromResult(0);
}

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

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

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

我的传统悬停状态在CSS中看起来像这样：

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

以下是为您设置的codepen：https://codepen.io/anon/pen/PJRzOQ

Answer 1

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

你可以在这里看到一个例子：

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颜色

1 个答案: