我似乎无法将这个容器包裹在md卡中。
在我的材料卡片中,我有这个:
<div class="mat-card-header-text"> </div>
我见过别人注意到了。它会在我的标题左侧产生40px的空间。没有CSS似乎也会影响它。
我正在使用Angular 4.x和Material2。
这个额外的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>
这种行为是Angular 2/4的view encapsulation的结果,它在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
创建自己的卡组件(可能使用component inheritence),但此时您只需直接修改组件的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 {
...
}
我通过向md-card-title提供负左边距来修复它
<md-card-title style="margin-left:-8px;">
使用以下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>
gives一些奇怪的间距问题。不确定这是不是一个bug。
为mat-card容器创建一个类并添加
border-collapse:collapse;
为我创造了奇迹。
如果您想同时支持标题中没有图像的版本,这是一种可能的解决方案。这个想法是切换一个类,当没有可用的图像时修复边距(通过示例中的链接输入设置)。这种卡的方式看起来很好,有和没有图像。
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;
}
我知道这是一个老问题,但今天仍然是一个问题。我解决的方法是在ts文件中覆盖它:
ngAfterViewInit() {
document.getElementsByClassName('mat-card-header-text')[0].setAttribute('style', 'margin: 0 0');
}
根据他们最近的推荐https://angular.io/guide/component-styles,这对我有用:
:host /deep/ .mat-card-header-text {
margin: 0;
}