Angular Material 卡片组件的 API 参考

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

Material Design 卡片组件。卡片包含关于单个主题的内容和操作。 请参阅 https://material.io/design/components/cards.html

MatCard 不提供任何行为，而是作为一种纯粹的视觉处理。

选择器： mat-card

Exported as: matCard
属性
名称 描述
@Input()

appearance: MatCardAppearance

卡片的标题，用于 <mat-card> 中。该组件只是一种可选的便利性卡片标题；可以使用任何自定义标题元素代替它。

MatCardTitle 不提供任何行为，而是作为一种纯粹的视觉处理。

选择器： mat-card-title [mat-card-title] [matCardTitle]

旨在于 <mat-card> 组件中使用的容器。可以只包含一个 <mat-card-title> 、一个 <mat-card-subtitle> 和一个任意大小的内容图像（例如 <img matCardLgImage> ）。

选择器： mat-card-title-group

卡片的内容，旨在用于 <mat-card> 中。该组件是一个可选的便利组件，可以与其他便利元素一起使用，例如 <mat-card-title> ；可以使用任何自定义内容块元素代替它。

MatCardContent 不提供任何行为，而是作为一种纯粹的视觉处理。

选择器： mat-card-content

卡片的副标题，用于在 <mat-card> <mat-card-title> 中使用。该组件是一个可选的便利组件，可以与其他便利元素一起使用，例如 <mat-card-title> 。

MatCardSubtitle 不提供任何行为，而是作为一种纯粹的视觉处理。

选择器： mat-card-subtitle [mat-card-subtitle] [matCardSubtitle]

包含操作按钮的卡片底部区域，旨在用于 <mat-card> 中。该组件是一个可选的便利组件，可以与其他便利元素一起使用，例如 <mat-card-content> ；可以使用任何自定义操作块元素代替它。

MatCardActions 不提供任何行为，而是作为一种纯粹的视觉处理。

选择器： mat-card-actions

Exported as: matCardActions
属性
名称 描述
@Input()

align: 'start' | 'end'

动作在卡片中的位置。

卡片的标题区域，用于在 <mat-card> 中使用。此卡片头表现卡片标题、副标题和头像。该组件是一个可选的便利组件，可以与其他便利元素一起使用，例如 <mat-card-footer> ；可以在其位置使用任何自定义标题块元素。

MatCardHeader 不提供任何行为，而是作为一种纯粹的视觉处理。

选择器： mat-card-header

页脚区域是一张卡片，用于在 <mat-card> 中使用。该组件是一个可选的便利组件，可以与其他便利元素一起使用，例如 <mat-card-content> ；可以在其位置使用任何自定义页脚块元素。

MatCardFooter 不提供任何行为，而是作为一种纯粹的视觉处理。

选择器： mat-card-footer

卡片的主要图像内容，旨在用于 <mat-card> 中。可以应用于任何媒体元素，例如 <img> 或 <picture> 。

该组件是一个可选的便利组件，可以与其他便利元素一起使用，例如 <mat-card-content> ；可以使用任何自定义媒体元素代替它。

MatCardImage 不提供任何行为，而是作为一种纯粹的视觉处理。

选择器： [mat-card-image] [matCardImage]

与 MatCardImage 相同，但很小。

选择器： [mat-card-sm-image] [matCardImageSmall]

与 MatCardImage 相同，但中等。

选择器： [mat-card-md-image] [matCardImageMedium]

与 MatCardImage 相同，但较大。

选择器： [mat-card-lg-image] [matCardImageLarge]

与 MatCardImage 相同，但超大。

选择器： [mat-card-xl-image] [matCardImageXLarge]

卡片的头像图像内容，旨在于 <mat-card> 中使用。可以应用于任何媒体元素，例如 <img> 或 <picture> 。

该组件是一个可选的便利组件，可以与其他便利元素一起使用，例如 <mat-card-title> ；可以使用任何自定义媒体元素代替它。

MatCardAvatar 不提供任何行为，而是作为一种纯粹的视觉处理。

选择器： [mat-card-avatar] [matCardAvatar]

可用于配置卡模块默认选项的对象。

属性
名称 描述

appearance: MatCardAppearance

卡片的默认外观。

 
type MatCardAppearance = 'outlined' | 'raised';

可用于为卡片模块提供默认选项的注入令牌。

const MAT_CARD_CONFIG: InjectionToken<MatCardConfig>;