web-dev-qa-db-fra.com

Comment gérez-vous div avec mat-card-header-text dans une carte material2?

Je n'arrive pas à envelopper ma tête autour d'avoir ce conteneur dans une carte md.

Dans mes cartes matérielles, j'ai ceci:

<div class="mat-card-header-text"> </div>

J'ai vu d'autres personnes le remarquer. Cela provoque un espace de 40 pixels à gauche de mon titre. Aucun CSS ne semble l'affecter non plus.

J'utilise Angular 4.x et Material2.

angularangular-material
12
flamusdiu

Corrigé en utilisant le CSS et le HTML suivants:

md-card-title > span {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    margin-top: -81px;
    margin-left: -24px;
    font-size: 20px;
    padding: 10px;
}

<div class="main" mat-padding fxLayout="row" fxLayoutWrap="no-wrap" fxLayoutAlign="center start" fxLayoutGap="15px">
    <md-card class="mat-elevation-z2" mat-whiteframe="8" (click)="goToArticle(article)" *ngFor="let article of articleStore.articles() | async">
        <img md-card-image src="{{ article.getCover() }}">
        <md-card-title fxFlex>
            <span>{{ article.title }}</span>
        </md-card-title>
        <md-card-content>
            <p>{{ article.description }}</p>
        </md-card-content>  
    </md-card>
</div>

En utilisant <md-card-header></md-card-header> donne des problèmes d'espacement impair. Je ne sais pas si c'est un bug ou non.

0
flamusdiu

Ce div supplémentaire est en fait assez ennuyeux. Il s'avère cependant que vous pouvez utiliser le piercing aux ombres pour lui appliquer un style sans changer le mode d'émulation CSS. Vous pouvez le faire en utilisant le combinateur :: ng-deep en tant que tel:

::ng-deep .mat-card-header-text {
  /* CSS styles go here */
  margin: 0px; // for example to remove the margin
}

Vous pouvez également remplacer l'en-tête entier par vos propres classes CSS à la place:

<mat-card>
  <div class="your-header">
    <div class="your-title">
      Your title here
    </div>
  </div>
  <mat-card-content>
    Stuff goes here
  </mat-card-content>
</mat-card>
21
Dre

Je l'ai corrigé en fournissant une marge gauche négative à md-card-title

<md-card-title style="margin-left:-8px;">
5
Lakhwinder

Ce comportement est le résultat de Angular 2/4's voir l'encapsulation , qui en mode Emulated injectera uniquement (via les éléments style ) les styles de composants qui correspondent aux éléments réellement dans votre gabarit de vue.

Donc, si vous essayez de remplacer un .mat-* style comme ça:

.mat-card-header-text {
  height: auto;
  margin: 0;
}

mais votre code HTML ressemble à ceci:

<md-card-header>
  <md-icon md-card-avatar>face</md-icon>
  <md-card-title>{{user.name}}</md-card-title>
  <md-card-subtitle>{{user.status | userStatus}}</md-card-subtitle>
</md-card-header>

puis le .mat-card-header-text la règle ne sera pas injectée dans le DOM, car l'injecteur ne voit pas un tel élément dans votre modèle.

La solution de contournement la plus simple consiste à inclure directement le div.mat-card-header-text élément dans votre modèle:

<md-card-header>
  <md-icon md-card-avatar>face</md-icon>
  <div class="mat-card-header-text">
    <md-card-title>{{user.name}}</md-card-title>
    <md-card-subtitle>{{user.status | userStatus}}</md-card-subtitle>
  </div>
</md-card-header>

Modifier: comme vous l'avez souligné, cela génère un _ div.mat-card-header-text, ce n'est donc pas une solution idéale. La seule façon de résoudre ce problème est de créer votre propre composant de carte basé sur md-card (en utilisant éventuellement héritage du composant ), mais à ce moment-là, il suffit de modifier directement le CSS du composant.

Sinon, vous pouvez basculer le mode d'encapsulation de la vue de votre composant sur None:

import { ViewEncapsulation } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'user-card',
  templateUrl: 'user-card.component.html',
  styleUrls: ['user-card.component.css'],
  encapsulation: ViewEncapsulation.None
})
...

Mais si vous faites cela, le :Host le sélecteur ne fonctionnera plus, vous devrez donc le remplacer par le sélecteur que vous avez spécifié dans le @Component décorateur:

user-card {
   ...
}
4
Lèse majesté

Selon leur récente recommandation https://angular.io/guide/component-styles , cela a fonctionné pour moi:

 :Host /deep/ .mat-card-header-text {
     margin: 0;
 }
1
Serge Makarov

Si vous souhaitez prendre en charge à la fois une version avec image dans l'en-tête et sans, c'est une solution possible. L'idée est de basculer une classe qui fixe la marge lorsqu'aucune image n'est disponible (définie via l'entrée de lien dans l'exemple). De cette façon, la carte semble bien avec et sans image.

Html:

<mat-card>
  <mat-card-header [ngClass]="{'fix-margin': !link}">
    <mat-card-title>{{content}}</mat-card-title>
    <mat-card-subtitle>{{content}}</mat-card-subtitle>
    <img *ngIf="link" mat-card-avatar [src]="link">
  </mat-card-header>
  <mat-card-content>
    {{content}}
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>SHOW</button>
  </mat-card-actions>
</mat-card>

Css

.fix-margin {
  margin: 0 -8px;
}

Ts

export class component {
  @Input() content;
  @Input() link;    
}
0
Tomnar

Je sais que c'est une vieille question, mais aujourd'hui encore c'est un problème. La façon dont j'ai résolu le remplaçait comme ceci dans le fichier ts:

ngAfterViewInit() {
    document.getElementsByClassName('mat-card-header-text')[0].setAttribute('style', 'margin: 0 0');
  }
0
Sebastian Ramirez

faire une classe pour le conteneur de cartes mat et ajouter

border-collapse:collapse;

fait des merveilles pour moi.

0
Maurice