跳转到内容
编辑此页面

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={10}
  renderItem={(item) => (
    <PaginationItem
      components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
      {...item}
    />
  )}
/>

分页范围

你可以使用 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 整合

<MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
  <Routes>
    <Route path="*" element={<Content />} />
  </Routes>
</MemoryRouter>

usePagination

For advanced customization use cases, a headless usePagination() hook is exposed. 它支持的选项与分页组件大致相同，但不包括与 JSX 渲染有关的所有属性。 它支持的选项与分页组件大致相同，但不包括与 JSX 渲染有关的所有属性。 The Pagination component is built on this hook.

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

表格分页

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

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

Rows per page:

21–30 of 100

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

You can learn more about this use case in the table section of the documentation.

Accessibility

ARIA

The root node has a role of "navigation" and aria-label "pagination navigation" by default. The page items have an aria-label that identifies the purpose of the item ("go to first page", "go to previous page", "go to page 1" etc.). You can override these using the getItemAriaLabel prop.

键盘输入

The pagination items are in tab order, with a tabindex of "0".

API