在 Angular 中使用 <mat-card> 材料

简介

<mat-card> 是 Angular Material 库提供的一个 UI 组件，用于呈现卡片式的内容。它可用于显示图片、标题、副标题和内容等等，并且可以添加颜色、阴影和响应式布局。

安装

首先，需要在项目中安装 Angular Material 库：

npm install --save @angular/material @angular/cdk @angular/animations

接着，在 app.module.ts 中引入 MatCardModule：

import { MatCardModule } from '@angular/material/card';

@NgModule({
  // ...
  imports: [
    // ...
    MatCardModule,
  ],
  // ...
})
export class AppModule { }

注意：如果你正在使用 Angular CLI 创建项目，则默认安装了 Angular Material 库。

使用

基本用法

在 HTML 中，通过 <mat-card> 标签来创建一个卡片：

<mat-card>
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Card title</mat-card-title>
    <mat-card-subtitle>Card subtitle</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      This is a card content. You can put whatever you want here.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

这将渲染出一个包含头像、标题、副标题、图片、内容和操作的卡片。

自定义颜色

可以使用 color 属性为卡片添加自定义颜色。例如，将背景颜色设置为灰色：

<mat-card color="primary">
  <!-- 卡片内容 -->
</mat-card>

添加阴影

使用 mat-elevation-z 属性为卡片添加阴影。值越高，阴影越明显。例如，将阴影设置为 4：

<mat-card mat-elevation-z="4">
  <!-- 卡片内容 -->
</mat-card>

响应式设计

Angular Material 库支持响应式设计，可以使用 fxLayout 和 fxFlex 属性来控制卡片的布局和宽度。例如，将两个卡片并排放置：

<div fxLayout="row" fxLayoutAlign="start center">
  <mat-card fxFlex="50%">
    <!-- 左侧卡片 -->
  </mat-card>
  <mat-card fxFlex="50%">
    <!-- 右侧卡片 -->
  </mat-card>
</div>

总结

<mat-card> 是 Angular Material 库中的一个非常实用的组件，可以帮助我们快速创建卡片式布局，并且可以自定义颜色、阴影和响应式布局。我们建议开发者在开发 Angular 应用时，多多利用 Material 组件库来提高生产力。