Angular 卡片

<mat-card> 是文本、照片和操作在单个主题上下文中的内容容器。

基本卡片

最基本的卡片只需要一个包含一些内容的 <mat-card> 元素。但是，Angular Material 提供了几个预设部分，您可以在 <mat-card> 中使用它们。

这些元素主要用作预先设置样式的容器，没有任何额外的 API。但是，它们对 <mat-card-actions> 的 align 属性可以将操作定位到容器的“开始”或“结束”位置。

卡片标题

除了上面提到的部分之外，<mat-card-header> 还能够为卡片添加丰富的标题。此标题可以包含

标题组

<mat-card-title-group> 可用于将标题、副标题和图像组合成一个部分。此元素可以包含

其中一个

可访问性

卡片可以用于各种场景，并且可以包含许多不同类型的内容。由于这种动态性质，适当的可访问性处理取决于 <mat-card> 的使用方式。

组、区域和地标

许多 ARIA 角色传达了 UI 的一部分代表一些语义上有意义的整体。 根据卡片的内容对您的应用程序意味着什么，role="group"、role="region" 或其中一个历史角色通常应应用于 <mat-card> 元素。

当卡片用作纯粹的装饰性容器时，没有必要扮演角色，该容器不会向单个主题传达相关材料的有意义的分组。 在这些情况下，卡片的内容必须遵循文档内容的标准做法。

中心

根据卡片的使用方式，为 <mat-card> 元素实现 tabindex 可能是合适的。如果卡片是用户与应用程序交互的主要机制，则 tabindex="0" 是合适的。 如果可以聚焦卡片，但它不属于文档流，则 tabindex="-1" 是合适的。

如果卡片用作纯粹的装饰性容器，则它不必是表格。在这种情况下，卡片内容应遵循选项卡顺序的一般最佳实践。