Question

我正在使用角度材料开发一个小型AngularJS应用程序。问题是我无法弄清楚如何使用我的配置中定义的调色板正确设置md-card-header的背景颜色。

$mdThemingProvider.theme('default')
    .primaryPalette('blue')
    .accentPalette('pink');

基本上我想将主色设置为卡片头的背景色。我当然可以复制RGB值，创建一个类并使用这个类设置颜色。但是，我会失去在运行时更改主题的好处，或者至少每当我更改主题时我都必须手动更改颜色。

如何将md-colors设置为任何元素，尤其是md-card-header？

Answer 1

你还不能在角质材料中为背景着色。对于您的示例，我将使用md-toolbar解决此问题。您可以使用class="md-warn/md-primary/md-accent"使用调色板中的颜色对其进行样式设置。

<md-card>
  <md-toolbar class="md-warn" style="border-radius: 3px 3px 0 0">
    <md-card-header>
      <md-card-avatar>
        <img class="md-user-avatar" src="...">
        </md-card-avatar>
        <md-card-header-text>
          <span class="md-title">User</span>
          <span class="md-subhead">subhead</span>
        </md-card-header-text>
      </md-card-header>
    </md-toolbar>

<强>更新

Angular-material刚刚添加了color service and a directive来使用代码中任何位置的主题中定义的颜色（1.1.0-rc4）。

您现在可以<md-card-header md-colors="::{backgroundColor: 'default-primary-700'}">。

我更新了codepen。

http://codepen.io/kuhnroyal/pen/pygvyR

Answer 2

检查https://material.angularjs.org/latest/Theming/02_declarative_syntax

角度材料中的主题适用于此

md-button
MD-复选框
MD-进展圆形
MD-进展线性
MD-单选按钮
MD-滑块
MD-开关
MD-分页
MD-文本浮
MD-工具栏

角度材料md-card-header背景

2 个答案: