PaginationItemAPI
React PaginationItem 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。
範例
匯入
import PaginationItem from '@mui/material/PaginationItem';
// or
import { PaginationItem } from '@mui/material';閱讀這篇關於最小化套件大小的指南，以瞭解差異。
原生元件的 Props 也可使用。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| classes | object | - | 覆寫或擴充應用於元件的樣式。 請參閱下方的CSS 類別 API 以瞭解更多詳細資訊。 |
| color | 'primary' | 'secondary' | 'standard' | string | 'standard' | 啟用的色彩。它同時支援預設和自訂主題色彩，可以按照調色盤自訂指南中所示的方式新增。 |
| component | elementType | - | 用於根節點的元件。可以是字串（用於 HTML 元素）或元件。 |
| components | { first?: elementType, last?: elementType, next?: elementType, previous?: elementType } | {} | 用於每個內部 slot 的元件。 |
| disabled | bool | false | 若為 |
| page | node | - | 目前的頁碼。 |
| selected | bool | false | 若為 |
| shape | 'circular' | 'rounded' | 'circular' | 分頁項目的形狀。 |
| size | 'small' | 'medium' | 'large' | string | 'medium' | 元件的大小。 |
| slotProps | { first?: func | object, last?: func | object, next?: func | object, previous?: func | object } | {} | 用於每個內部 slot 的 props。 |
| slots | { first?: elementType, last?: elementType, next?: elementType, previous?: elementType } | {} | 用於每個內部 slot 的元件。 |
| sx | Array<func | object | bool> | func | object | - | 系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。 請參閱 `sx` 頁面 以瞭解更多詳細資訊。 |
| type | 'end-ellipsis' | 'first' | 'last' | 'next' | 'page' | 'previous' | 'start-ellipsis' | 'page' | 分頁項目的類型。 |
| variant | 'outlined' | 'text' | string | 'text' | 要使用的 variant。 |
ref 會轉發到根元素。主題預設 props
您可以使用 MuiPaginationItem 透過主題變更此元件的預設 props。
| Slot 名稱 | 類別名稱 | 預設元件 | 描述 |
|---|---|---|---|
| first | |||
| last | |||
| next | |||
| previous |
這些類別名稱對於使用 CSS 設定樣式很有用。它們會在觸發特定狀態時應用於元件的 slots。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .Mui-disabled | 若 disabled={true}，則應用於根元素的狀態類別。 | |
| .Mui-focusVisible | 鍵盤焦點在根元素上時，應用於根元素的狀態類別。 | |
| .Mui-selected | 若 selected={true}，則應用於根元素的狀態類別。 | |
| .MuiPaginationItem-colorPrimary | colorPrimary | 若 color="primary"，則應用於根元素的樣式。 |
| .MuiPaginationItem-colorSecondary | colorSecondary | 若 color="secondary"，則應用於根元素的樣式。 |
| .MuiPaginationItem-ellipsis | ellipsis | 若 type="start-ellipsis" 或 type="end-ellipsis"，則應用於根元素的樣式。 |
| .MuiPaginationItem-firstLast | firstLast | 若 type="first" 或 type="last"，則應用於根元素的樣式。 |
| .MuiPaginationItem-icon | icon | 應用於要顯示的圖示的樣式。 |
| .MuiPaginationItem-outlined | outlined | 若 variant="outlined"，則應用於根元素的樣式。 |
| .MuiPaginationItem-outlinedPrimary | outlinedPrimary | 若 variant="outlined" 且 color="primary"，則應用於根元素的樣式。 |
| .MuiPaginationItem-outlinedSecondary | outlinedSecondary | 若 variant="outlined" 且 color="secondary"，則應用於根元素的樣式。 |
| .MuiPaginationItem-page | page | Styles applied to the root element if type="page". |
| .MuiPaginationItem-previousNext | previousNext | Styles applied to the root element if type="previous" or type="next". |
| .MuiPaginationItem-root | root | Styles applied to the root element. |
| .MuiPaginationItem-rounded | rounded | Styles applied to the root element if rounded="true". |
| .MuiPaginationItem-sizeLarge | sizeLarge | Styles applied to the root element if size="large". |
| .MuiPaginationItem-sizeSmall | sizeSmall | Styles applied to the root element if size="small". |
| .MuiPaginationItem-text | text | 若 variant="text"，則應用於根元素的樣式。 |
| .MuiPaginationItem-textPrimary | textPrimary | 若 variant="text" 且 color="primary"，則應用於根元素的樣式。 |
| .MuiPaginationItem-textSecondary | textSecondary | 若 variant="text" 且 color="secondary"，則應用於根元素的樣式。 |
您可以使用以下自訂選項之一來覆寫元件的樣式
- 使用全域類別名稱。
- 在自訂主題中使用規則名稱作為元件
styleOverrides屬性的一部分。
原始碼
如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。