angular - 如何填写 Angular 材卡头

我有类似下一个模板的棱角分明的经典卡片

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

并尝试填写像

最佳答案

您可以使用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

关于angular - 如何填写 Angular 材卡头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56022641/