Carte d'en-tête couleur d'arrière-plan sur Angular2 matériaux

Je pensais que ce serait simple, mais j'ai du mal à définir la couleur d'arrière-plan d'une carte d'en-tête dans Angular2 matériaux et je ne suis pas à trouver des exemples. Donc, vu le code suivant, j'aimerais avoir des conseils sur la façon d'aller sur la définition de la couleur d'arrière-plan de md-carte-titre:

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

OriginalL'auteur user3127996 | 2017-09-20

Juste ajouter [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 travail démo.

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

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

et définir la [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 d'une autre alternative est d'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>

Je pense que cela devrait être accepté comme une réponse

OriginalL'auteur Faisal

2

L'une de ces permettrait de définir l'en-tête arrière-plan:
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 une
```
.mat-card-header {
    background-color: red !important;
    padding: 5px !important;
}

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

.mat-card-content {
    padding: 5px !important;
}
```
DÉMO

Vous avez raison, l'OP doit inspecter les DOM et à détecter, le style de l'élément dont Il/Elle devrait changer. Pour générées dynamiquement des éléments, qui ne sont pas dans la composante en HTML, il faut utiliser ::ng-deep ou /deep/.
Je savais que ::deep sera depricated, mais ne savait pas à propos de encapsulation: ViewEncapsulation.None, merci pour l'info!
De toute façon, la vie sans ::ng-deep et encapsulation sera très difficile, nous avons besoin de la façon d'obtenir l'accès à l'ombre DOM (ou comment on appelle correctement).
Consultez la mise à jour du post pour l'en-tête

OriginalL'auteur Vega
1

Angulaire Matériel utilise les couleurs par défaut (couleur principale de la palette de couleurs que vous utilisez). Il y a donc deux façons:
1. Remplacer les couleurs de thème
2. Utilisation !important drapeau de remplacer les couleurs par défaut, comme ceci: md-card-title { background-color: green !important; }
OriginalL'auteur Commercial Suicide

Vous devez vous connecter pour publier un commentaire.