CODEWITHSUNDEEP
cssangularjsangular-material
LordTribual
LordTribual

Reputation: 4249

Angular Material md-card-header background

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?

Upvotes: 3

Views: 11717

Answers (2)

kuhnroyal
kuhnroyal

Reputation: 7563

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

Upvotes: 5

kTn
kTn

Reputation: 595

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

Upvotes: -1

Related Questions