跳到主要内容
+

分页

分页组件允许用户从一系列页面中选择特定页面。

按下 Enter 键开始编辑
按下 Enter 键开始编辑
按下 Enter 键开始编辑
按下 Enter 键开始编辑

按钮

您可以选择启用首页和末页按钮,或禁用上一页和下一页按钮。

按下 Enter 键开始编辑

自定义图标

可以自定义控件图标。

按下 Enter 键开始编辑

分页范围

您可以使用 siblingCount 属性指定当前页面两侧显示的数字位数,并使用 boundaryCount 属性指定起始页和结束页码旁边的位数。

按下 Enter 键开始编辑

页码1

按下 Enter 键开始编辑
按下 Enter 键开始编辑

usePagination

对于高级自定义用例,公开了一个无头的 usePagination() Hook。它接受与 Pagination 组件几乎相同的选项,但去除了所有与 JSX 渲染相关的属性。Pagination 组件就是基于这个 Hook 构建的。

import usePagination from '@mui/material/usePagination';

表格分页

Pagination 组件旨在用于在不使用无限滚动时对任意项目列表进行分页。在 SEO 很重要的上下文中,例如博客,它更受欢迎。

对于大型表格数据的分页,您应该使用 TablePagination 组件。

每页行数

21–30 / 100

按下 Enter 键开始编辑

您可以在文档的表格部分了解有关此用例的更多信息。

无障碍访问

ARIA

根节点默认具有 "navigation" 角色和 aria-label "pagination navigation"。页面项具有 aria-label,用于标识项的用途(“转到首页”、“转到上一页”、“转到第 1 页”等)。您可以使用 getItemAriaLabel 属性覆盖这些内容。

键盘

分页项在 Tab 键顺序中,tabindex 为 "0"。

API

请参阅以下文档,以获取此处提及的组件的所有属性和类的完整参考。