web-dev-qa-db-ja.com

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>
cssangularangular-material2
9
user3127996

[style.backgroundColor]="'COLOR_YOU_WANT'"セレクターに<md-card-header>を追加するだけです。

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

[ngClass]セレクターで<md-card-header>を設定します。

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

これらのいずれかは、ヘッダーの背景を設定するのに役立ちます。

  1. つかいます ::ng-deep

    ::ng-deep .mat-card-header {
    background-color: red !important;
    padding: 5px !important;
}

::ng-deep .mat-card {
    padding: 0 !important;
}

::ng-deep .mat-card-content {
    padding: 5px !important;
}

[〜＃〜] demo [〜＃〜]

  1. つかいます encapsulation: ViewEncapsulation.Noneコンポーネントデコレータと

    .mat-card-header {
    background-color: red !important;
    padding: 5px !important;
}

.mat-card {
    padding: 0 !important;
}

.mat-card-content {
    padding: 5px !important;
}

[〜＃〜] demo [〜＃〜]

2
Vega

Angular Materialはパレットを使用するため、2つの方法があります。

  1. 現在のパレットでテーマの色を上書きする（または独自のパレットを作成する）
  2. !importantフラグを使用して、次のようにデフォルトの色を上書きします（フラグなしでは機能せず、多くの場合機能しない場合）：md-card-title { background-color: green !important; }（場合によっては::ng-deep同様にそれらの要素にアクセスできます）
::ng-deep md-card-title {
  background-color: green !important;
}
  1. NgStyle または NgClass を使用します
0
Commercial Suicide