角度材料md-card-header背景

Question

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

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

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

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

Answer 1

你还不能在角度材料中为背景着色.对于你的例子,我会通过使用a来解决这个问题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刚刚添加了一个颜色服务和一个指令,用于在代码中的任何位置使用主题中定义的颜色(1.1.0-rc4).

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

我更新了codepen.

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