跳转到内容

分页组件 Pagination

使用分页组件,用户可以从一系列页面中选择某个特定的页面。

基础分页

<Pagination count={10} />
<Pagination count={10} color="primary" />
<Pagination count={10} color="secondary" />
<Pagination count={10} disabled />

描边分页

<Pagination count={10} variant="outlined" />
<Pagination count={10} variant="outlined" color="primary" />
<Pagination count={10} variant="outlined" color="secondary" />
<Pagination count={10} variant="outlined" disabled />

圆形分页

<Pagination count={10} shape="rounded" />
<Pagination count={10} variant="outlined" shape="rounded" />

分页大小

<Pagination count={10} size="small" />
<Pagination count={10} />
<Pagination count={10} size="large" />

按钮

你可以有选择地启用首尾页的按钮,或这禁用上一页和下一页的按钮。

<Pagination count={10} showFirstButton showLastButton />
<Pagination count={10} hidePrevButton hideNextButton />

分页范围

你可以使用 siblingRange 属性来指定当前页面两侧显示的数字多少,并使用boundaryRange属性来调整在起始和结束页码旁边显示的位数。

<Pagination count={11} defaultPage={6} siblingCount={0} />
<Pagination count={11} defaultPage={6} /> {/* Default ranges */}
<Pagination count={11} defaultPage={6} siblingCount={0} boundaryCount={2} />
<Pagination count={11} defaultPage={6} boundaryCount={2} />

可控制的分页

Page: 1

<Typography>Page: {page}</Typography>
<Pagination count={10} page={page} onChange={handleChange} />

与 Router 整合

usePagination

对于高级自定义用例,我们暴露了一个 headless 的 usePagination() hook。 它支持的选项与分页组件大致相同,但不包括与 JSX 渲染有关的所有属性。 分页组件内部也使用此 hook。

import { usePagination } from '@material-ui/lab/Pagination';

表格分页

Pagination 组件的设计是为了在不使用无限加载的情况下,将任意数量的项目进行分页。 比如说博客这样重视 SEO 的环境下,它是首选。

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

每页行数:

10

21-30 的 100

<TablePagination
  component="div"
  count={100}
  page={page}
  onChangePage={handleChangePage}
  rowsPerPage={rowsPerPage}
  onChangeRowsPerPage={handleChangeRowsPerPage}
/>

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

无障碍设计

ARIA

默认情况下,根节点具有 "导航(navigation)" 和 aria-label 的“分页导航” 的作用。 页面的项目带有一个 aria-label,用于标识项目的用途(“转到首页”,“转到上一页”,“转到第一页”等)。 你可以使用 getItemAriaLabel 属性来覆盖它们。

键盘输入

分页项目按标签顺序排列,标签索引为“0”。