垂直分隔 Angular Material 张卡片
Separating Angular Material cards vertically
我想用卡片垂直列出数组中的项目,但它们之间没有 space。我尝试使用填充,但它似乎不起作用。
我怎样才能拥有这些卡spaced?
<ng-container *ngIf="titles?.length; else noTitle">
<mat-card class="asd cardPardding" *ngFor="let title of titles">
<p>
{{title}}
</p>
</mat-card>
</ng-container>
<ng-template #noTitle>
<mat-card class="asd cardPardding">
<p>
No title !
</p>
</mat-card>
</ng-template>
这是css
.asd {
width: 80%;
margin: 0 auto; /* Added */
}
.inputasd {
width: 100%;
}
.cardPadding {
padding: 100px;
margin-bottom: 50px;
}
.component.html
<ng-container *ngIf="titles?.length; else noTitle">
<mat-card class="my-class-name asd cardPardding" *ngFor="let title of titles">
<p>
{{title}}
</p>
</mat-card>
</ng-container>
<ng-template #noTitle>
<mat-card class="asd cardPardding">
<p>
No title !
</p>
</mat-card>
</ng-template>
.css/.scss file
.my-class-name{
margin-bottom: 10px;
...
}
我花了太多时间来解决这个问题。然后我以为我知道错了,但我的错误只是 class 名称中的 1 个字母。你没事,保证金有效。我打错了 class 名字。感谢您的回复。
我想用卡片垂直列出数组中的项目,但它们之间没有 space。我尝试使用填充,但它似乎不起作用。
我怎样才能拥有这些卡spaced?
<ng-container *ngIf="titles?.length; else noTitle">
<mat-card class="asd cardPardding" *ngFor="let title of titles">
<p>
{{title}}
</p>
</mat-card>
</ng-container>
<ng-template #noTitle>
<mat-card class="asd cardPardding">
<p>
No title !
</p>
</mat-card>
</ng-template>
这是css
.asd {
width: 80%;
margin: 0 auto; /* Added */
}
.inputasd {
width: 100%;
}
.cardPadding {
padding: 100px;
margin-bottom: 50px;
}
.component.html
<ng-container *ngIf="titles?.length; else noTitle">
<mat-card class="my-class-name asd cardPardding" *ngFor="let title of titles">
<p>
{{title}}
</p>
</mat-card>
</ng-container>
<ng-template #noTitle>
<mat-card class="asd cardPardding">
<p>
No title !
</p>
</mat-card>
</ng-template>
.css/.scss file
.my-class-name{
margin-bottom: 10px;
...
}
我花了太多时间来解决这个问题。然后我以为我知道错了,但我的错误只是 class 名称中的 1 个字母。你没事,保证金有效。我打错了 class 名字。感谢您的回复。