PaginationAPI

React 分頁元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

範例

如需此 React 元件的使用範例和詳細資訊，請造訪元件示範頁面

Pagination

Import

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

閱讀這份關於最小化套件大小的指南，以瞭解差異。

Props

原生元件的 Props 也可使用。

名稱	類型	預設值	描述
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 樣式的系統 prop。請參閱 `sx` 頁面以瞭解更多詳細資訊。
variant	'outlined' \| 'text' \| string	'text'	要使用的變體。

ref 轉發到根元素。

主題預設 props

您可以使用 MuiPagination 透過主題變更此元件的預設 props。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。它們在觸發特定狀態時應用於元件的插槽。

類別名稱	規則名稱	描述
.MuiPagination-outlined	outlined	若 `variant="outlined"`，則樣式會應用於根元素。
.MuiPagination-root	root	樣式會應用於根元素。
.MuiPagination-text	text	若 `variant="text"`，則樣式會應用於根元素。
.MuiPagination-ul	ul	樣式會應用於 ul 元素。

您可以使用以下自訂選項之一覆寫元件的樣式

使用全域類別名稱。
使用規則名稱作為自訂主題中元件的styleOverrides 屬性的一部分。

原始碼

如果您在此頁面中找不到資訊，請考慮查看元件的實作以瞭解更多詳細資訊。