Angular Material Card 组件完整 API 与源码级使用指南angular/material_card【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/componentsmat-card是 Angular Material 中用于承载文本、图片与操作按钮的内容容器它把某个单一主题single subject的相关信息组织在一个视觉单元中。本文以仓库中angular/material_card的 API 报告goldens/material/card/index.api.md为骨架结合 card 模块源码、card.md 官方文档、样式与测试代码完整讲解卡片组件的全部公开 API、appearance外观体系、布局分区、配置注入、可访问性建议与测试 Harness 用法帮助你写出可复用、可维护且符合 Material 规范的生产级卡片界面。API 总览angular/material_card导出了什么API Extractor 生成的黄金文件golden file完整罗列了该包的全部公开符号。angular/material_card共导出1 个常量、1 个接口、1 个类型别名、1 个 NgModule 与 13 个组件/指令符号类型Selector / 用途MAT_CARD_CONFIGInjectionTokenMatCardConfig全局配置卡片默认外观的注入令牌MatCardConfiginterface配置对象仅含可选字段appearanceMatCardAppearancetypeoutlined \| raised \| filledMatCardComponentmat-card卡片容器本体MatCardHeaderComponentmat-card-header顶部标题区MatCardTitleGroupComponentmat-card-title-group标题/副标题/图片组合区MatCardTitleDirectivemat-card-title, [mat-card-title], [matCardTitle]MatCardSubtitleDirectivemat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]MatCardContentDirectivemat-card-content正文内容区MatCardActionsDirectivemat-card-actions底部操作按钮区含align输入MatCardFooterDirectivemat-card-footer底部区域MatCardAvatarDirective[mat-card-avatar], [matCardAvatar]头像MatCardImage/Sm/Md/Lg/XlDirective五种尺寸的媒体图片指令从 card-module.ts 可以看出MatCardModule一次性声明并导出上述全部 14 个组件/指令同时额外导出BidiModule来自angular/cdk/bidi用于支持 RTL 双向文本场景。因此应用中只需import {MatCardModule} from angular/material/card; NgModule({ imports: [MatCardModule], }) export class MyModule {}若项目采用独立组件standalone模式则直接在各组件中import {MatCardModule} from angular/material/card即可API 报告中的组件声明均带有standalone: true标记。卡片容器MatCard与三种外观appearanceMatCard是整个模块的核心但正如源码注释所说它不提供任何交互行为纯粹是视觉容器MatCard provides no behaviors, instead serving as a purely visual treatment。外观类型与默认值export type MatCardAppearance outlined | raised | filled;MatCard通过Input() appearance接受外观其 host 绑定见 card.ts会根据当前外观动态添加 CSS 类host: { class: mat-mdc-card mdc-card, [class.mat-mdc-card-outlined]: appearance outlined, [class.mdc-card--outlined]: appearance outlined, [class.mat-mdc-card-filled]: appearance filled, [class.mdc-card--filled]: appearance filled, }三种外观的视觉差异由 card.scss 中的对应规则定义raised默认使用card-elevated-container-*系列 token默认带一级阴影elevation level 1、4pxM2/ medium 圆角M3底色为 surface 色outlined使用card-outlined-*系列 token1px 边框描边、无阴影适合信息密度高的列表场景filled使用card-filled-*系列 token底色更深M3 中为surface-container-highest、无阴影。mat-card默认 raised 外观/mat-card mat-card appearanceoutlined描边卡片/mat-card mat-card appearancefilled填充卡片/mat-card全局默认外观MAT_CARD_CONFIG若希望应用内所有卡片统一采用某种外观无需在每个mat-card上写appearance而是通过MAT_CARD_CONFIG注入令牌全局配置。构造逻辑位于 card.tsconstructor() { const config injectMatCardConfig(MAT_CARD_CONFIG, {optional: true}); this.appearance config?.appearance || raised; }可见该注入是可选的未提供配置时回退到raised。全局配置方式import {MAT_CARD_CONFIG} from angular/material/card; providers: [ {provide: MAT_CARD_CONFIG, useValue: {appearance: outlined}}, ]MatCardConfig目前仅包含一个可选字段appearance即只支持全局配置外观其余视觉参数均通过主题 token见后文控制。卡片布局分区五个预置内容容器mat-card自身不添加任何内边距见 card.md Card padding 一节把所有 padding 的控制权交给开发者但 Angular Material 提供了五个预置内容容器可以直接获得 Material 规范中的标准间距元素说明mat-card-header锚定在卡片顶部的区域增加 paddingmat-card-content主要正文区域增加 paddingimg mat-card-image卡片图片拉伸至容器宽度mat-card-actions底部按钮容器增加 paddingmat-card-footer锚定在卡片底部的区域mat-card-content的 padding 规则见 card.scss值得注意默认水平 16px若它是卡片第一个元素则顶部加 16px若是最后一个元素则底部加 16px从而避免多个区域叠加出多余间距。mat-card-header则添加左右与顶部 paddingmat-card-actions为按钮提供 8px 内边距并保证最小高度 52px。一个完整的卡片布局示例mat-card appearanceoutlined mat-card-header div mat-card-avatar/div mat-card-title卡片标题/mat-card-title mat-card-subtitle副标题/mat-card-subtitle /mat-card-header img mat-card-image srcphoto.jpg alt示例图片 mat-card-content p这是卡片的主要正文内容。/p /mat-card-content mat-card-actions alignend button mat-button分享/button button mat-button了解更多/button /mat-card-actions mat-card-footer span页脚信息/span /mat-card-footer /mat-card操作区对齐MatCardActions.alignmat-card-actions是唯一带公开输入的预置容器Input() align: start | end start;默认start靠左传alignend时添加mat-mdc-card-actions-align-end类并应用justify-content: flex-end见 card.scss。源码中还有 TODO 注释指出未来可能弃用align而改名为actionPosition/actionAlignment以避开与原生align属性的命名冲突——这是 API 演进方向供读者留意。卡片头部与标题组header / title-groupMatCardHeadermat-card-header用于组织标题、副标题与头像其模板 card-header.html 展示了内容投影content projection顺序ng-content select[mat-card-avatar], [matCardAvatar]/ng-content div classmat-mdc-card-header-text ng-content selectmat-card-title, mat-card-subtitle, [mat-card-title], [mat-card-subtitle], [matCardTitle], [matCardSubtitle]/ng-content /div ng-content/ng-content即头像avatar优先投影标题与副标题被统一收进mat-mdc-card-header-text包装层其余任意内容投影到末尾。标题与副标题可以是元素形式mat-card-title也可以是属性形式img mat-card-title等选择器全面兼容两种写法。MatCardTitleGroupmat-card-title-group用于把标题、副标题与一张非头像的图片组合成单一区块其模板 card-title-group.html 支持mat-card-title/mat-card-subtitle或对应属性形式五档图片之一mat-card-sm-image、mat-card-md-image、mat-card-lg-image、mat-card-xl-image以及基础版mat-card-image其余任意内容。布局上该容器为display: flex; justify-content: space-between标题文字居左、媒体图片居右见 card.scss。媒体图片指令五档尺寸与头像图片指令均以属性指令形式存在可作用于img、picture等任意媒体元素且都带mdc-card__media类以启用背景覆盖式媒体样式。各档固定尺寸定义在 card.scss指令选择器两种命名风格尺寸MatCardImage[mat-card-image]/[matCardImage]拉伸至容器宽度MatCardSmImage[mat-card-sm-image]/[matCardImageSmall]80×80pxMatCardMdImage[mat-card-md-image]/[matCardImageMedium]112×112pxMatCardLgImage[mat-card-lg-image]/[matCardImageLarge]152×152pxMatCardXlImage[mat-card-xl-image]/[matCardImageXLarge]240×240pxMatCardAvatar[mat-card-avatar]/[matCardAvatar]40×40px 圆形头像avatar样式为 40px 圆形border-radius: 50%并设置object-fit: cover让图片按背景覆盖方式裁切见 card.scss。当头像与标题、副标题并列时会自动收紧标题行高以与头像对齐。用法示例mat-card-title-group mat-card-title产品卡片/mat-card-title mat-card-subtitle产品副标题/mat-card-subtitle img mat-card-lg-image srcproduct.png alt产品图 /mat-card-title-group样式与主题M2 / M3 设计令牌体系卡片视觉完全由设计令牌design tokens驱动分为 M2Material 2 兼容与 M3Material 3两套实现_m3-card.scssget-tokens($theme)生成 M3 token例如圆角取系统corner-medium、raised 底色取surface-container-low、filled 底色取surface-container-highest、outlined 描边取outline-variant标题字体取title-large-*系列、副标题取title-medium-*系列_m2-card.scssM2 回退实现圆角固定 4px标题/副标题分别映射到title-small-*与label-medium-*系列raised 阴影为 elevation level 1outlined/filled 无阴影。card.scss 通过token-utils.slot(...)消费这些令牌例如 raised 卡片的底色、圆角、阴影以及标题、副标题的字族、字号、字重、行高与字距均来自 token 槽位。这意味着你可以通过 Angular Material 的标准主题覆盖机制自定义主题、组件级mat.card.*CSS 变量统一调整所有卡片的观感而无需逐个修改样式。若你的项目尚未切换到 Material 3M2 token 文件即为当前默认外观的来源依据。另外card.scss 中.mat-mdc-card::after绘制了一层透明 1px 边框用于高对比度模式high-contrast下保证卡片轮廓可见outlined 卡片因自带真实边框会通过border: none去掉这层重复边框见该文件第 47-52 行。可访问性Accessibility实践卡片可承载多种内容、用于多种场景因此合适的无障碍处理取决于你的具体用法详见 card.md 的 Accessibility 一节分组、区域与地标角色当卡片内容对外部而言是一个语义整体时可在mat-card上应用以下 ARIA 角色之一rolegroup表示一组相关元素的集合roleregion表示用户可能浏览到的显著区域某个地标角色landmark role如rolenavigation、rolemain等。若卡片仅作为纯装饰容器、不传达围绕单一主题的相关内容分组语义则无需添加任何角色卡片内容遵循普通文档内容的无障碍惯例即可。焦点管理根据交互方式为mat-card设置tabindex场景建议卡片是用户与应用交互的主要机制如可点开的卡片列表tabindex0进入 Tab 顺序需要把注意力送到卡片但不属于文档主流程如被 JS 触发聚焦tabindex-1纯装饰容器不设 tabindex内容遵循常规 Tab 顺序注意MatCard 本体不提供按钮/涟漪等点击行为源码 TODO 中提到的MatActionCard尚未实现MDC 的.mdc-card__primary-action支持仍待补充因此若把整张卡片做成可点击区域需要自行处理键盘事件与 ARIA 语义如rolebutton或内部放置真实按钮。文章建议始终以真实测试验证目标用户的实际体验。测试支持MatCardHarnessangular/material/card/testing提供了基于 CDK Component Harness 的测试工具可在单元测试与端到端测试中稳定查询与断言卡片内容。核心文件testing/card-harness.tsMatCardHarness继承ContentContainerComponentHarnessMatCardSectionhost 选择器为.mat-mdc-cardtesting/card-harness-filters.tsCardHarnessFilters过滤条件testing/index.ts 与 testing/public-api.ts 为公开导出入口。MatCardSection枚举把卡片划分为可查询的内容区块export enum MatCardSection { HEADER .mat-mdc-card-header, CONTENT .mat-mdc-card-content, ACTIONS .mat-mdc-card-actions, FOOTER .mat-mdc-card-footer, }MatCardHarness提供的方法方法作用with(options)按CardHarnessFilters过滤text、title、subtitle支持字符串或正则getText()获取卡片全部文本getTitleText()获取.mat-mdc-card-title文本无则返回空串getSubtitleText()获取.mat-mdc-card-subtitle文本无则返回空串测试示例import {TestBed} from angular/core/testing; import {MatCardHarness, MatCardSection} from angular/material/card/testing; import {HarnessLoader} from angular/cdk/testing; import {TestbedHarnessEnvironment} from angular/cdk/testing/testbed; let loader: HarnessLoader; beforeEach(async () { await TestBed.configureTestingModule({imports: [/* 被测模块 */]}).compileComponents(); loader TestbedHarnessEnvironment.loader(TestBed.createComponent(MyCardComponent)); }); it(应能按标题找到卡片, async () { const cards await loader.getAllHarnesses( MatCardHarness.with({title: /产品/}), ); expect(cards.length).toBeGreaterThan(0); expect(await cards[0].getSubtitleText()).toContain(副标题); });测试实现本身位于 testing/card-harness.spec.ts可作为编写卡片相关 Harness 用例的参考。小结angular/material_card的 API 面并不复杂却覆盖了从容器、分区、媒体到全局配置与测试的全部卡片需求核心是MatCard组件配合appearance三种外观outlined/raised/filled用MAT_CARD_CONFIG注入令牌即可全局设定默认外观内容布局由header、content、actions、footer等预置容器与五档图片指令协作完成间距遵循 Material 规范且完全可控视觉表现全部落到 M2/M3 设计令牌上便于主题统一可访问性则要求开发者按实际语义选用 ARIA 角色与tabindex。配合MatCardHarness你可以为卡片界面建立稳定、可维护的自动化测试。后续需要深入了解具体示例时可继续阅读 card.md 与仓库内对应的卡片示例代码位于src/components-examples/material/card/目录下。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Angular Material Card 组件完整 API 与源码级使用指南angular/material_card【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/componentsmat-card是 Angular Material 中用于承载文本、图片与操作按钮的内容容器它把某个单一主题single subject的相关信息组织在一个视觉单元中。本文以仓库中angular/material_card的 API 报告goldens/material/card/index.api.md为骨架结合 card 模块源码、card.md 官方文档、样式与测试代码完整讲解卡片组件的全部公开 API、appearance外观体系、布局分区、配置注入、可访问性建议与测试 Harness 用法帮助你写出可复用、可维护且符合 Material 规范的生产级卡片界面。API 总览angular/material_card导出了什么API Extractor 生成的黄金文件golden file完整罗列了该包的全部公开符号。angular/material_card共导出1 个常量、1 个接口、1 个类型别名、1 个 NgModule 与 13 个组件/指令符号类型Selector / 用途MAT_CARD_CONFIGInjectionTokenMatCardConfig全局配置卡片默认外观的注入令牌MatCardConfiginterface配置对象仅含可选字段appearanceMatCardAppearancetypeoutlined \| raised \| filledMatCardComponentmat-card卡片容器本体MatCardHeaderComponentmat-card-header顶部标题区MatCardTitleGroupComponentmat-card-title-group标题/副标题/图片组合区MatCardTitleDirectivemat-card-title, [mat-card-title], [matCardTitle]MatCardSubtitleDirectivemat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]MatCardContentDirectivemat-card-content正文内容区MatCardActionsDirectivemat-card-actions底部操作按钮区含align输入MatCardFooterDirectivemat-card-footer底部区域MatCardAvatarDirective[mat-card-avatar], [matCardAvatar]头像MatCardImage/Sm/Md/Lg/XlDirective五种尺寸的媒体图片指令从 card-module.ts 可以看出MatCardModule一次性声明并导出上述全部 14 个组件/指令同时额外导出BidiModule来自angular/cdk/bidi用于支持 RTL 双向文本场景。因此应用中只需import {MatCardModule} from angular/material/card; NgModule({ imports: [MatCardModule], }) export class MyModule {}若项目采用独立组件standalone模式则直接在各组件中import {MatCardModule} from angular/material/card即可API 报告中的组件声明均带有standalone: true标记。卡片容器MatCard与三种外观appearanceMatCard是整个模块的核心但正如源码注释所说它不提供任何交互行为纯粹是视觉容器MatCard provides no behaviors, instead serving as a purely visual treatment。外观类型与默认值export type MatCardAppearance outlined | raised | filled;MatCard通过Input() appearance接受外观其 host 绑定见 card.ts会根据当前外观动态添加 CSS 类host: { class: mat-mdc-card mdc-card, [class.mat-mdc-card-outlined]: appearance outlined, [class.mdc-card--outlined]: appearance outlined, [class.mat-mdc-card-filled]: appearance filled, [class.mdc-card--filled]: appearance filled, }三种外观的视觉差异由 card.scss 中的对应规则定义raised默认使用card-elevated-container-*系列 token默认带一级阴影elevation level 1、4pxM2/ medium 圆角M3底色为 surface 色outlined使用card-outlined-*系列 token1px 边框描边、无阴影适合信息密度高的列表场景filled使用card-filled-*系列 token底色更深M3 中为surface-container-highest、无阴影。mat-card默认 raised 外观/mat-card mat-card appearanceoutlined描边卡片/mat-card mat-card appearancefilled填充卡片/mat-card全局默认外观MAT_CARD_CONFIG若希望应用内所有卡片统一采用某种外观无需在每个mat-card上写appearance而是通过MAT_CARD_CONFIG注入令牌全局配置。构造逻辑位于 card.tsconstructor() { const config injectMatCardConfig(MAT_CARD_CONFIG, {optional: true}); this.appearance config?.appearance || raised; }可见该注入是可选的未提供配置时回退到raised。全局配置方式import {MAT_CARD_CONFIG} from angular/material/card; providers: [ {provide: MAT_CARD_CONFIG, useValue: {appearance: outlined}}, ]MatCardConfig目前仅包含一个可选字段appearance即只支持全局配置外观其余视觉参数均通过主题 token见后文控制。卡片布局分区五个预置内容容器mat-card自身不添加任何内边距见 card.md Card padding 一节把所有 padding 的控制权交给开发者但 Angular Material 提供了五个预置内容容器可以直接获得 Material 规范中的标准间距元素说明mat-card-header锚定在卡片顶部的区域增加 paddingmat-card-content主要正文区域增加 paddingimg mat-card-image卡片图片拉伸至容器宽度mat-card-actions底部按钮容器增加 paddingmat-card-footer锚定在卡片底部的区域mat-card-content的 padding 规则见 card.scss值得注意默认水平 16px若它是卡片第一个元素则顶部加 16px若是最后一个元素则底部加 16px从而避免多个区域叠加出多余间距。mat-card-header则添加左右与顶部 paddingmat-card-actions为按钮提供 8px 内边距并保证最小高度 52px。一个完整的卡片布局示例mat-card appearanceoutlined mat-card-header div mat-card-avatar/div mat-card-title卡片标题/mat-card-title mat-card-subtitle副标题/mat-card-subtitle /mat-card-header img mat-card-image srcphoto.jpg alt示例图片 mat-card-content p这是卡片的主要正文内容。/p /mat-card-content mat-card-actions alignend button mat-button分享/button button mat-button了解更多/button /mat-card-actions mat-card-footer span页脚信息/span /mat-card-footer /mat-card操作区对齐MatCardActions.alignmat-card-actions是唯一带公开输入的预置容器Input() align: start | end start;默认start靠左传alignend时添加mat-mdc-card-actions-align-end类并应用justify-content: flex-end见 card.scss。源码中还有 TODO 注释指出未来可能弃用align而改名为actionPosition/actionAlignment以避开与原生align属性的命名冲突——这是 API 演进方向供读者留意。卡片头部与标题组header / title-groupMatCardHeadermat-card-header用于组织标题、副标题与头像其模板 card-header.html 展示了内容投影content projection顺序ng-content select[mat-card-avatar], [matCardAvatar]/ng-content div classmat-mdc-card-header-text ng-content selectmat-card-title, mat-card-subtitle, [mat-card-title], [mat-card-subtitle], [matCardTitle], [matCardSubtitle]/ng-content /div ng-content/ng-content即头像avatar优先投影标题与副标题被统一收进mat-mdc-card-header-text包装层其余任意内容投影到末尾。标题与副标题可以是元素形式mat-card-title也可以是属性形式img mat-card-title等选择器全面兼容两种写法。MatCardTitleGroupmat-card-title-group用于把标题、副标题与一张非头像的图片组合成单一区块其模板 card-title-group.html 支持mat-card-title/mat-card-subtitle或对应属性形式五档图片之一mat-card-sm-image、mat-card-md-image、mat-card-lg-image、mat-card-xl-image以及基础版mat-card-image其余任意内容。布局上该容器为display: flex; justify-content: space-between标题文字居左、媒体图片居右见 card.scss。媒体图片指令五档尺寸与头像图片指令均以属性指令形式存在可作用于img、picture等任意媒体元素且都带mdc-card__media类以启用背景覆盖式媒体样式。各档固定尺寸定义在 card.scss指令选择器两种命名风格尺寸MatCardImage[mat-card-image]/[matCardImage]拉伸至容器宽度MatCardSmImage[mat-card-sm-image]/[matCardImageSmall]80×80pxMatCardMdImage[mat-card-md-image]/[matCardImageMedium]112×112pxMatCardLgImage[mat-card-lg-image]/[matCardImageLarge]152×152pxMatCardXlImage[mat-card-xl-image]/[matCardImageXLarge]240×240pxMatCardAvatar[mat-card-avatar]/[matCardAvatar]40×40px 圆形头像avatar样式为 40px 圆形border-radius: 50%并设置object-fit: cover让图片按背景覆盖方式裁切见 card.scss。当头像与标题、副标题并列时会自动收紧标题行高以与头像对齐。用法示例mat-card-title-group mat-card-title产品卡片/mat-card-title mat-card-subtitle产品副标题/mat-card-subtitle img mat-card-lg-image srcproduct.png alt产品图 /mat-card-title-group样式与主题M2 / M3 设计令牌体系卡片视觉完全由设计令牌design tokens驱动分为 M2Material 2 兼容与 M3Material 3两套实现_m3-card.scssget-tokens($theme)生成 M3 token例如圆角取系统corner-medium、raised 底色取surface-container-low、filled 底色取surface-container-highest、outlined 描边取outline-variant标题字体取title-large-*系列、副标题取title-medium-*系列_m2-card.scssM2 回退实现圆角固定 4px标题/副标题分别映射到title-small-*与label-medium-*系列raised 阴影为 elevation level 1outlined/filled 无阴影。card.scss 通过token-utils.slot(...)消费这些令牌例如 raised 卡片的底色、圆角、阴影以及标题、副标题的字族、字号、字重、行高与字距均来自 token 槽位。这意味着你可以通过 Angular Material 的标准主题覆盖机制自定义主题、组件级mat.card.*CSS 变量统一调整所有卡片的观感而无需逐个修改样式。若你的项目尚未切换到 Material 3M2 token 文件即为当前默认外观的来源依据。另外card.scss 中.mat-mdc-card::after绘制了一层透明 1px 边框用于高对比度模式high-contrast下保证卡片轮廓可见outlined 卡片因自带真实边框会通过border: none去掉这层重复边框见该文件第 47-52 行。可访问性Accessibility实践卡片可承载多种内容、用于多种场景因此合适的无障碍处理取决于你的具体用法详见 card.md 的 Accessibility 一节分组、区域与地标角色当卡片内容对外部而言是一个语义整体时可在mat-card上应用以下 ARIA 角色之一rolegroup表示一组相关元素的集合roleregion表示用户可能浏览到的显著区域某个地标角色landmark role如rolenavigation、rolemain等。若卡片仅作为纯装饰容器、不传达围绕单一主题的相关内容分组语义则无需添加任何角色卡片内容遵循普通文档内容的无障碍惯例即可。焦点管理根据交互方式为mat-card设置tabindex场景建议卡片是用户与应用交互的主要机制如可点开的卡片列表tabindex0进入 Tab 顺序需要把注意力送到卡片但不属于文档主流程如被 JS 触发聚焦tabindex-1纯装饰容器不设 tabindex内容遵循常规 Tab 顺序注意MatCard 本体不提供按钮/涟漪等点击行为源码 TODO 中提到的MatActionCard尚未实现MDC 的.mdc-card__primary-action支持仍待补充因此若把整张卡片做成可点击区域需要自行处理键盘事件与 ARIA 语义如rolebutton或内部放置真实按钮。文章建议始终以真实测试验证目标用户的实际体验。测试支持MatCardHarnessangular/material/card/testing提供了基于 CDK Component Harness 的测试工具可在单元测试与端到端测试中稳定查询与断言卡片内容。核心文件testing/card-harness.tsMatCardHarness继承ContentContainerComponentHarnessMatCardSectionhost 选择器为.mat-mdc-cardtesting/card-harness-filters.tsCardHarnessFilters过滤条件testing/index.ts 与 testing/public-api.ts 为公开导出入口。MatCardSection枚举把卡片划分为可查询的内容区块export enum MatCardSection { HEADER .mat-mdc-card-header, CONTENT .mat-mdc-card-content, ACTIONS .mat-mdc-card-actions, FOOTER .mat-mdc-card-footer, }MatCardHarness提供的方法方法作用with(options)按CardHarnessFilters过滤text、title、subtitle支持字符串或正则getText()获取卡片全部文本getTitleText()获取.mat-mdc-card-title文本无则返回空串getSubtitleText()获取.mat-mdc-card-subtitle文本无则返回空串测试示例import {TestBed} from angular/core/testing; import {MatCardHarness, MatCardSection} from angular/material/card/testing; import {HarnessLoader} from angular/cdk/testing; import {TestbedHarnessEnvironment} from angular/cdk/testing/testbed; let loader: HarnessLoader; beforeEach(async () { await TestBed.configureTestingModule({imports: [/* 被测模块 */]}).compileComponents(); loader TestbedHarnessEnvironment.loader(TestBed.createComponent(MyCardComponent)); }); it(应能按标题找到卡片, async () { const cards await loader.getAllHarnesses( MatCardHarness.with({title: /产品/}), ); expect(cards.length).toBeGreaterThan(0); expect(await cards[0].getSubtitleText()).toContain(副标题); });测试实现本身位于 testing/card-harness.spec.ts可作为编写卡片相关 Harness 用例的参考。小结angular/material_card的 API 面并不复杂却覆盖了从容器、分区、媒体到全局配置与测试的全部卡片需求核心是MatCard组件配合appearance三种外观outlined/raised/filled用MAT_CARD_CONFIG注入令牌即可全局设定默认外观内容布局由header、content、actions、footer等预置容器与五档图片指令协作完成间距遵循 Material 规范且完全可控视觉表现全部落到 M2/M3 设计令牌上便于主题统一可访问性则要求开发者按实际语义选用 ARIA 角色与tabindex。配合MatCardHarness你可以为卡片界面建立稳定、可维护的自动化测试。后续需要深入了解具体示例时可继续阅读 card.md 与仓库内对应的卡片示例代码位于src/components-examples/material/card/目录下。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考