分页组件 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 组件。

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

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

无障碍设计

ARIA

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

键盘输入

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