角度材料md-card-header背景

Question

I am developing a small AngularJS application using angular-material. The problem is I cannot figure out how to properly set the background-color of the md-card-header using the color palette defined in my config.

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

Basically I want to set the primary color as the background color of the card header. I could of course copy the RGB value, create a class and set the color using this class. However, I would loose the benefit of changing the theme at runtime or at least I would have to manually change the color whenever I change my theme.

How can I set md-colors to any element, especially the md-card-header?

Answer 1

You can not color backgrounds in angular-material as of yet. For your example I would work around this by using a md-toolbar . You can use class="md-warn/md-primary/md-accent" to style it with the colors from your palette.

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

Update:

Angular-material just added a color service and a directive to use the colors defined in a theme anywhere in your code (1.1.0-rc4).

You can now do <md-card-header md-colors="::{backgroundColor: 'default-primary-700'}"> .

I updated the codepen.

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

Answer 2

check https://material.angularjs.org/latest/Theming/02_declarative_syntax

Theming in angular material apply to this

• md-button
• md-checkbox
• md-progress-circular
• md-progress-linear
• md-radio-button
• md-slider
• md-switch
• md-tabs
• md-text-float
• md-toolbar