Как вы справляетесь с div с mat-card-header-text на карточке material2?

Ответ 1

Исправлено его использование следующих css и html:

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>

Использование <md-card-header></md-card-header> дает некоторые проблемы с нечетным интервалом. Не уверен, что это ошибка или нет.

Ответ 2

Этот дополнительный div на самом деле очень раздражает. Однако, как оказалось, вы можете использовать теневой пирсинг для применения стиля к нему без изменения режима эмуляции CSS. Вы можете сделать это, используя комбинатор:: ng-deep как таковой:

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

Вместо этого вы можете просто заменить весь заголовок своими собственными CSS-классами:

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

Ответ 3

Я исправил это, предоставив отрицательное левое поле для md-card-title

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

Ответ 4

Это поведение является результатом Angular 2/4 просмотр инкапсуляции, который в режиме Emulated будет вводить только (через style) стили компонентов, которые соответствуют элементам в вашем шаблоне.

Итак, если вы попытаетесь переопределить стиль .mat-* следующим образом:

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

но ваш HTML выглядит так:

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

тогда правило .mat-card-header-text не будет введено в DOM, так как инжектор не видит такого элемента в вашем шаблоне.

Простейшим обходным путем является непосредственное включение элемента div.mat-card-header-text в ваш шаблон:

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

Изменить:, как вы указали, это создает дополнительный пустой div.mat-card-header-text, поэтому это не идеальное решение. Единственный способ исправить это, если вы создаете свой собственный компонент карты на основе md-card (возможно, используя наследование компонентов), но в этот момент вы просто измените компонент CSS напрямую.

В противном случае вы можете переключить режим инкапсуляции вида для вашего компонента на 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
})
...

Хотя если вы это сделаете, селектор :host больше не будет работать, поэтому вам нужно будет заменить его селектором, указанным в декораторе @Component:

user-card {
   ...
}

Ответ 5

сделай класс для контейнера mat-card и добавь

border-collapse:collapse;

творил чудеса для меня.

Ответ 6

Если вы хотите поддерживать версию с изображением в заголовке и без нее, это одно из возможных решений. Идея состоит в том, чтобы переключить класс, который фиксирует поле, когда изображение недоступно (задается через ссылку на вход в примере). Таким образом, карта выглядит хорошо с и без изображения.

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

Ц.

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

Ответ 7

Ответ Мориса на месте:

border-collapse:collapse;

Одна строка решает эту проблему.

Ответ 8

Я знаю, это старый вопрос, но все же сегодня это проблема. Способ, который я решил, переопределил это так в файле ts:

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

Ответ 9

Согласно их недавней рекомендации https://angular.io/guide/component-styles, это сработало для меня:

 :host /deep/ .mat-card-header-text {
     margin: 0;
 }