web-dev-qa-db-fra.com

Couleur d'arrière-plan de l'en-tête de la carte sur les matériaux Angular2

Je pensais que ce serait simple, mais j'ai du mal à définir la couleur d'arrière-plan d'un en-tête de carte dans les matériaux Angular2 et je ne trouve aucun exemple. Par conséquent, étant donné le code suivant, j'apprécierais des conseils sur la façon de définir la couleur d'arrière-plan de 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

Ajoutez simplement [style.backgroundColor]="'COLOR_YOU_WANT'" dans votre <md-card-header> sélecteur:

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

Lien vers démonstration de travail .

Vous pouvez également ajouter une classe dans votre fichier css:

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

et définissez le [ngClass] dans votre <md-card-header> sélecteur:

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

ou une autre alternative consiste à utiliser [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

L'un ou l'autre de ces éléments aiderait à définir l'arrière-plan de l'en-tête:

  1. Utilisation ::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;
}

DÉMO

  1. Utilisation encapsulation: ViewEncapsulation.None sur les composants décorateur an

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

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

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

DÉMO

2
Vega

Le matériau angulaire utilise des palettes, il y a donc deux façons:

  1. Écraser les couleurs du thème directement dans la palette actuelle (ou créer votre propre palette)
  2. Utilisation !important flag pour remplacer les couleurs par défaut (si cela ne fonctionne pas sans le flag, et dans de nombreux cas il ne le fait pas), comme ceci: md-card-title { background-color: green !important; } (dans certains cas, vous aurez besoin de ::ng-deep également pour accéder à ces éléments)
::ng-deep md-card-title {
  background-color: green !important;
}
  1. Utilisez NgStyle ou NgClass
0
Commercial Suicide