Card header-hintergrund-Farbe auf Angular2 Materialien

Dachte ich, dass es einfach werden würde, aber ich bin kämpfen, um die Hintergrundfarbe der Karte-header innerhalb Angular2 Materialien und ich bin nicht auf der Suche nach einem Beispiele. Deshalb, da Sie den folgenden code, würde ich mich über Tipps, wie man über die Einstellung der Hintergrundfarbe der md-Karte-Titel:

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

InformationsquelleAutor user3127996 | 2017-09-20

Fügen Sie einfach [style.backgroundColor]="'COLOR_YOU_WANT'" in Ihrem <md-card-header> selector:

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

Link zu funktionsfähige demo.

Alternativ fügen Sie eine Klasse in der css-Datei:

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

und legen Sie die [ngClass] in Ihrem <md-card-header> selector:

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

oder eine andere alternative ist die Verwendung [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>

Ich denke, das sollte akzeptiert werden, als eine Antwort

InformationsquelleAutor Faisal

2

Beiden helfen würde, um den header-hintergrund:
1. Verwenden ::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. Verwenden encapsulation: ViewEncapsulation.None auf Komponenten-Dekorator eine
```
.mat-card-header {
    background-color: red !important;
    padding: 5px !important;
}

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

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

Du hast Recht, die OP zu untersuchen, die DOM-und zu erkennen, den Stil, die element Er/Sie sollte sich ändern. Für dynamisch generierte Elemente, die nicht in der Komponente HTML -, sollten wir nutzen ::ng-deep oder /deep/.
Ich wusste, dass ::deep werden depricated, aber nicht wusste, über encapsulation: ViewEncapsulation.None, danke für die info!
Trotzdem, das Leben ohne ::ng-deep und encapsulation wird sehr schwer, wir müssen den Weg, um den Zugriff auf die shadow-DOM (oder wie es heißt korrekt).
Finden Sie die aktualisierten post für den header

InformationsquelleAutor Vega
1

Eckig Material verwendet Standard-Farben (Hauptfarbe der Farbe Palette, die Sie verwenden). So gibt es zwei Möglichkeiten:
1. Überschreiben das Thema Farben
2. Verwenden !important flag zum überschreiben von Standard-Farben, wie diese: md-card-title { background-color: green !important; }
InformationsquelleAutor Commercial Suicide

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.