css – Angular2材质上的卡片头背景颜色

我认为这很简单,但我很难在Angular2材料中设置卡片头的背景颜色,我找不到任何例子.因此,鉴于以下代码,我将非常感谢如何设置md-card-title的背景颜色：

<md-card>
   <md-card-header>
      <md-card-title>Title</md-card-title>
      <md-card-subtitle>Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

解决方法

只需在< md-card-header>中添加[style.backgroundColor] =“’COLOR_YOU_WANT’”即可.选择：

<md-card>
   <md-card-header [style.backgroundColor]="'yellow'"> 
      <md-card-title>Title</md-card-title>
      <md-card-subtitle>Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

链接到working demo.

或者,在css文件中添加一个类：

.custom-card {
  background-color: gray;
}

并在< md-card-header>中设置[ngClass]选择：

<md-card>
   <md-card-header [ngClass]="{'custom-card':true}"> 
      <md-card-title>Title</md-card-title>
      <md-card-subtitle>Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

或另一种方法是使用[ngStyle]：

<md-card [ngStyle]="{'padding':'0px'}">
   <md-card-header [ngStyle]="{'background-color':'green'}"> 
      <md-card-title [ngStyle]="{'font-size':'24px'}">Title</md-card-title>
      <md-card-subtitle [ngStyle]="{'font-size':'12px','color':'white'}">Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

css – Angular2材质上的卡片头背景颜色

解决方法

相关文章