css - Angular Material md-card-header 背景

Question

我正在使用 Angular Material 开发一个小型 AngularJS 应用程序。问题是我不知道如何使用我的配置中定义的调色板正确设置 md-card-header 的背景色。

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

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

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

Answer 1

到目前为止，您还不能在 Angular Material 中为背景着色。对于您的示例，我将使用 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'}"> .

我更新了代码笔。

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