极客笔记Angular Material 7 – 卡片
随着前端技术的快速发展，越来越多的开发者开始使用Angular架构进行web应用程序的开发。而在Angular Material 7库中，卡片（Card）是应用程序中非常流行的UI组件之一。卡片除了在设计框架上提供一种简单易用的方式来组织内容之外，还可以提高用户体验，使内容更易于阅读。在这篇文章中，我们将深入探讨Angular Material 7卡片的使用方法和功能。
安装Angular Material 7
首先，我们需要在Angular工程中安装Angular Material 7。打开终端或命令提示符，切换到工程目录，并执行以下命令：
npm install --save @angular/material @angular/cdk @angular/animations
该命令安装Angular Material 7依赖。然后，在安装过程中我们需要更新项目的app.module.ts文件以包含新的库。打开这个文件，并从@angular/material中导入所有我们需要的库
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCheckboxModule } from '@angular/material';
@NgModule({
imports: [
BrowserAnimationsModule,
MatButtonModule,
MatCheckboxModule,
// 添加其他库的导入
],
exports: [
BrowserAnimationsModule,
MatButtonModule,
MatCheckboxModule,
// 添加其他库的导出
]
})
export class MyMaterialModule { }
这里我们导入了MatButtonModule和MatCheckboxModule。您可以根据需要导入和导出其他类库和组件。在导出中，我们在这个工程的其他部分中将使用这些库。
创建卡片
接下来，让我们创建一个包含卡片的简单网页。创建一个名为card.component.html的新文件，并添加以下代码：
<mat-card>
<mat-card-header>
<mat-card-title>标题</mat-card-title>
<mat-card-subtitle>副标题</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>内容</p>
</mat-card-content>
</mat-card>
上述代码创建了一个包含标题和内容的卡片。
现在，我们需要在Angular组件中引入这个卡片。创建一个名为card.component.ts的新文件，并按如下方式编写代码：
import { Component } from '@angular/core';
@Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.css']
})
export class CardComponent { }
在这个组件中，我们指定选择器和html和css文件的路径。现在，在我们的app.component.html中使用卡片。
<app-card></app-card>
最后，运行应用程序并查看结果。
ng serve
更多卡片选项
除了上面提到的标题和内容之外，卡片还有更多的选项可以自定义，例如图像和列表。以下是一些常见的选项：
图像
要在卡片中添加图像，请使用以下代码：
<mat-card>
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>标题</mat-card-title>
<mat-card-subtitle>副标题</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>内容</p>
</mat-card-content>
</mat-card>
这里我们在卡片头部的mat-card-avatar标签中添加了一个自定义类名example-header-image，然后为其定义了一些CSS样式。
列表
要包含一个列表，我们可以使用以下代码：
<mat-card>
<mat-card-header>
<mat-card-title>标题</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-list>
<h3 mat-subheader>列表标题</h3>
<mat-list-item>
<mat-icon matListAvatar><img src="img1.jpg"></mat-icon>
<h4 mat-line>项目标题</h4>
<p mat-line>项目内容</p>
</mat-list-item>
<mat-list-item>
<mat-icon matListAvatar>folder</mat-icon>
<h4 mat-line>其他项目标题</h4>
<p mat-line>其他项目内容</p>
</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
在这里，我们使用了mat-list和mat-list-item标签来创建列表。在每个mat-list-item中，我们可以显示图标、标题和内容。使用mat-line属性可以使这些元素在不同的行中显示。
不同类型的卡片
在Angular Material 7库中，有不同类型的卡片，包括基本卡片、纸片卡、投影卡等。下面是一些创建不同类型卡片的示例代码：
基本卡片
<mat-card>
<mat-card-header>
<mat-card-title>标题</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>内容</p>
</mat-card-content>
</mat-card>
纸片卡
<mat-card class="example-card">
<mat-card-header>
<mat-card-title>标题</mat-card-title>
<mat-card-subtitle>副标题</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>内容</p>
</mat-card-content>
</mat-card>
投影卡
<mat-card>
<mat-card-header>
<mat-card-title>标题</mat-card-title>
</mat-card-header>
<mat-card-header class="example-card-header">
<mat-card-title>额外标题</mat-card-title>
<mat-card-subtitle>额外副标题</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>内容</p>
</mat-card-content>
</mat-card>
在投影卡代码中，我们在卡片内容中添加了第二个mat-card-header标签，以显示额外的标题和副标题。我们还使用了一些CSS样式来调整这些元素的位置和样式。
结论
在Angular Material 7中，卡片是一种流行的UI组件，用于显示组织好的内容。通过创建具有自定义选项的卡片，开发者可以提高应用程序的外观和体验。在本文中，我们了解了如何创建基本的卡片，以及如何添加图像、列表和不同类型的卡片。这些例子有助于您开始使用卡片，并更好地了解它们的使用方法和功能。