分页 (Pagination)API

React Pagination 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示 (Demos)

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

分页 (Pagination)

导入 (Import)

import Pagination from '@mui/material/Pagination';
// or
import { Pagination } from '@mui/material';

通过阅读这篇关于最小化 bundle size 的指南，了解它们之间的区别。

Props

原生组件的 Props 也可用。

名称 (Name)	类型 (Type)	默认值 (Default)	描述 (Description)
boundaryCount	integer	1	始终在开头和结尾可见的页数。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的CSS 类 API。
color	'primary' \| 'secondary' \| 'standard' \| string	'standard'	活动颜色。它同时支持默认主题颜色和自定义主题颜色，自定义主题颜色可以按照调色板自定义指南中所示的方式添加。
count	integer	1	总页数。
defaultPage	integer	1	当组件不受控制时，默认选择的页码。
disabled	bool	false	如果 `true`，则组件被禁用。
getItemAriaLabel	func	-	接受一个函数，该函数返回一个字符串值，为当前页面提供用户友好的名称。这对屏幕阅读器用户非常重要。出于本地化目的，您可以使用提供的翻译。签名：`function(type: string, page: number \| null, selected: boolean) => string` `type` 要格式化的链接或按钮类型 ('page' \| 'first' \| 'last' \| 'next' \| 'previous' \| 'start-ellipsis' \| 'end-ellipsis')。默认为 'page'。 `page` 要格式化的页码。 `selected` 如果为 true，则当前页被选中。
hideNextButton	bool	false	如果 `true`，则隐藏下一页按钮。
hidePrevButton	bool	false	如果 `true`，则隐藏上一页按钮。
onChange	func	-	当页面更改时触发的回调。签名：`function(event: React.ChangeEvent<unknown>, page: number) => void` `event` 回调的事件源。 `page` 选择的页码。
page	integer	-	当前页码。与从 `0` 开始编号的 `TablePagination` 不同，此分页从 `1` 开始。
renderItem	func	(item) => <PaginationItem {...item} />	渲染项。签名：`function(params: PaginationRenderItemParams) => ReactNode` `params` 要在 PaginationItem 上展开的 props。
shape	'circular' \| 'rounded'	'circular'	分页项的形状。
showFirstButton	bool	false	如果 `true`，则显示首页按钮。
showLastButton	bool	false	如果 `true`，则显示末页按钮。
siblingCount	integer	1	当前页前后始终可见的页数。
size	'small' \| 'medium' \| 'large' \| string	'medium'	组件的大小。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统属性。有关更多详细信息，请参阅 `sx` 页面。
variant	'outlined' \| 'text' \| string	'text'	要使用的变体。

ref 被转发到根元素。

主题默认 props

您可以使用 MuiPagination 通过主题更改此组件的默认 props。

CSS 类

这些类名对于使用 CSS 设置样式很有用。当特定状态被触发时，它们会被应用到组件的插槽。

类名 (Class name)	规则名 (Rule name)	描述 (Description)
.MuiPagination-outlined	outlined	如果 `variant="outlined"`，则应用于根元素的样式。
.MuiPagination-root	root	应用于根元素的样式。
.MuiPagination-text	text	如果 `variant="text"`，则应用于根元素的样式。
.MuiPagination-ul	ul	应用于 ul 元素的样式。

您可以使用以下自定义选项之一覆盖组件的样式

使用全局类名。
使用规则名称作为自定义主题中组件的 styleOverrides 属性的一部分。

源代码 (Source code)

如果您在此页面中找不到所需信息，请考虑查看组件的实现以获取更多详细信息。