Angular Material (MAT) 卡片和分页器

MAT 卡片是什么？

<mat-card> 是一个内容容器，用于展示关于某个主题的作品、照片和文本。

基本卡片部分

基本卡片只需要 <mat-card> 元素和一些内容。然而，它提供了几个预设的部分供你在 <mat-card> 中使用。

<mat-card> 作为预样式的内容，无需任何额外的 API。但是，align 属性可以用于在 <mat-card-actions> 容器的“开始”或“结束”处执行操作。

卡片头部

卡片头部提供了为卡片部分添加丰富头部的能力。头部可以包含以下所有部分：

Angular Material 卡片 API 参考

示例：带有多部分的卡片

HTML 代码

TS 代码

CSS 代码

MAT 分页器

<mat-paginator> 提供页面信息导航，常与表格一起使用。

分页器的基本用法

1. 每页项目数（默认为 50）。
2. 项目总数。

页面索引的默认值为 0，但可以通过 pageIndex 显式设置。当用户与分页器交互时，会触发 PageEvent，因为 PageEvent 用于更新任何相关的数据视图。

页面大小选项

它帮助用户显示一个下拉列表来选择选项。此选项可以通过 PageSize options 设置。

它允许你更改以下控件：

1. 每个页面长度的标签。
2. 显示给用户的范围文本。
3. 导航按钮上的工具提示消息

可访问性

<mat-Paginator> 中的第一页、最后一页、上一页和下一页按钮可以设置 aria-labels。

Angular Material 分页器 API 参考

可配置分页器示例

HTML 代码

TS 代码

CSS 代码