分页

此组件允许用户逐页浏览显示的内容,例如在表格中。

IMG - 8.png

何时使用

何时使用

  • 在所有分页显示的情况下。
  • 允许用户跳过几页或直接跳转到所需页面。
  • 允许用户自定义每页显示的行数。
  • 固定页面内各部分的大小,以避免顶部自动加载的内容移动底部内容。

3.png

🚫 何时避免

当您需要在搜索结果页面之间实现无缝过渡时,请使用自动加载或按钮加载,除非这会减慢页面速度。

2.png

1.png

结构

IMG - 18.png

  1. 当前页。显示当前显示页的序号。
  2. 上一页。打开上一页。
  3. 下一页。打开下一页。
  4. 内容最后一页。当总内容已知且可立即分页时显示。点击打开最后一页。
  5. 溢出图标。当页数超过四页时显示。
  6. 前进/后退切换按钮。逐页切换。
  7. 跳转到第一页。打开内容的第一页。
  8. 跳转到指定页。当用户输入页码并按 Enter 键时,打开指定的页面。
  9. 每页项目数。切换每页显示的元素数量的开关。

您不必同时使用结构中的所有元素。您可以在“修改”下找到可用的配置。

尺寸

默认情况下,分页器中的按钮、输入框和选择框的尺寸为 M。

Frame 2087326211.png

状态

IMG - 19.png

第一页 显示第一页。

第二页/后续页 显示第二页及后续页面。

最后一页 显示最后一页。

修改

IMG - 20.png

  1. 每页显示数量选项和显示输入框:如果用户无法跳转到特定页面或控制页面上显示的内容量,可以禁用这些字段。
  2. 总数未知:仅显示当前页。当未知元素总数时使用。
  3. 隐藏页码:确保在没有页码的情况下进行页面切换。当元素列表是动态的,页数和页码会不断变化并可能让用户感到困惑时使用。
  4. 紧凑型:一种不带文本的紧凑格式。当界面空间有限时使用(例如在对话框中)。

对于移动设备界面,您可以使用分页器的移动版本。

IMG - 23.png

上一页加载器
下一页弹出框