angular - Angular 材卡头如何填写

Question

我有像下一个模板一样的 Angular Material 经典卡片

<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Shiba Inu</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <p>The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.</p>
  </mat-card-content>
</mat-card>

并尝试填写银色标题，例如

Answer 1

您可以使用mat-card-header和mat-card-content，

<mat-card class="example-card">
   <mat-card-header>
        <mat-card-title>Shiba Inu</mat-card-title>
   </mat-card-header>
   <mat-card-content>
    <p>The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.</p>
   </mat-card-content>
</mat-card>

并设置这些CSS

mat-card-header{
  background: #12121212;
  padding: 5px;
  color:white;
}

mat-card-content{
  padding: 10px;
}

mat-card{
  padding:0;
}

example app