Pagination API

想要学习更多组件属性和 CSS API，可以查阅 React Pagination 组件的 API 文档。

导入

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

你可以阅读这个关于最小化捆绑包的指南以了解以上二者的差异。

组件名称

在主题中，名称“MuiPagination”可用于提供默认属性（props），或者样式覆盖

属性

原生（Native）组件的属性也是可用的。

名称	类型	默认值	描述
boundaryCount	integer	1	Number of always visible pages at the beginning and end.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
color	'primary' \| 'secondary' \| 'standard' \| string	'standard'	The active color. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
count	integer	1	The total number of pages.
defaultPage	integer	1	The page selected by default when the component is uncontrolled.
disabled	bool	false	如果被设置为 `true`，那么该组件将会被禁用。
getItemAriaLabel	func		Accepts a function which returns a string value that provides a user-friendly name for the current page. This is important for screen reader users. For localization purposes, you can use the provided translations. Signature: `function(type: string, page: number, selected: bool) => string` type: The link or button type to format ('page' \| 'first' \| 'last' \| 'next' \| 'previous'). Defaults to 'page'. page: The page number to format. selected: If true, the current page is selected.
hideNextButton	bool	false	If `true`, hide the next-page button.
hidePrevButton	bool	false	If `true`, hide the previous-page button.
onChange	func		Callback fired when the page is changed. Signature: `function(event: object, page: number) => void` event: The event source of the callback. page: The page selected.
page	integer		The current page.
renderItem	func	(item) => <PaginationItem {...item} />	Render the item. Signature: `function(params: PaginationRenderItemParams) => ReactNode` params: The props to spread on a PaginationItem.
shape	'circular' \| 'rounded'	'circular'	The shape of the pagination items.
showFirstButton	bool	false	If `true`, show the first-page button.
showLastButton	bool	false	If `true`, show the last-page button.
siblingCount	integer	1	Number of always visible pages before and after the current page.
size	'small' \| 'medium' \| 'large' \| string	'medium'	The size of the autocomplete.
sx	Array<func \| object \| bool> \| func \| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
variant	'outlined' \| 'text' \| string	'text'	The variant to use.

ref 则会被传递到根元素中。

CSS

规则名称	全局类名	描述
root	.MuiPagination-root	Styles applied to the root element.
ul	.MuiPagination-ul	Styles applied to the ul element.
outlined	.MuiPagination-outlined	Styles applied to the root element if `variant="outlined"`.
text	.MuiPagination-text	Styles applied to the root element if `variant="text"`.

您可以使用组件自定义选项对组件进行个性化：

具备全局类名.
在自定义主体中，设定一个规则名称作为组件的styleOverrides属性的一部分。

演示项目

Pagination