分页

使用分页组件，用户能够从一系列页面中选择某个特定页面。

基础分页

<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} />

路由器集成

`usePagination`

针对高级定制应用场景，我们公开了一个usePagination() hook。它支持的选项与分页组件大致相同，但不包括与JSX渲染有关的所有属性。分页组件内部也使用的是这个hook。

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

可访问性

ARIA

默认情况下，根节点具有“导航”和aria-label“分页导航”的作用。页面项目均具有aria-label，用于标识项目的用途（“转至首页”、“转至上一页”、“转到第1页”等）。可以使用getItemAriaLabel属性改写这些值。

键盘

分页项目按Tab键次序排列，tabindex为“0”。

分页