跳到主要內容跳到主要內容
🚀 影響 Material UI 的 2025 年roadmap！參與最新的開發者調查

MobileStepperAPI

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

示範

Import

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

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

Props

Paper 元件的 Props 也可使用。

名稱類型預設描述
steps*integer-

總步數。

activeStepinteger0

設定活動步驟（從零開始的索引）。定義當 variant 為 'dots' 時，哪個點會被強調顯示。

backButtonnode-

後退按鈕元素。例如，它可以是 Button 或 IconButton。

classesobject-

覆寫或擴充應用於元件的樣式。

請參閱下方CSS 類別 API 以瞭解更多詳細資訊。

LinearProgressPropsobject-

應用於 LinearProgress 元素的 Props。

nextButtonnode-

下一個按鈕元素。例如，它可以是 Button 或 IconButton。

position'bottom'
| 'static'
| 'top'		'bottom'

設定定位類型。

slotProps{ dot?: func
| object, dots?: func
| object, progress?: func
| object, root?: func
| object }		{}

用於每個 slot 內部的 props。

slots{ dot?: elementType, dots?: elementType, progress?: elementType, root?: elementType }{}

用於每個 slot 內部的元件。

sxArray<func
| object
| bool>
| func
| object		-

系統 prop，允許定義系統覆寫以及其他 CSS 樣式。

請參閱 `sx` 頁面 以瞭解更多詳細資訊。

variant'dots'
| 'progress'
| 'text'		'dots'

要使用的 variant。

此元件無法持有 ref。

繼承

雖然上方未明確記載，但 Paper 元件的 props 也可在 MobileStepper 中使用。您可以利用此優勢來鎖定巢狀元件。

主題預設 props

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

Slots

Slot 名稱類別名稱預設元件描述
root.MuiMobileStepper-rootPaper呈現 root slot 的元件。
progress.MuiMobileStepper-progressLinearProgress呈現 progress slot 的元件。
dots.MuiMobileStepper-dots'div'呈現 dots slot 的元件。
dot.MuiMobileStepper-dot'div'呈現 dot slot 的元件。

CSS 類別

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

類別名稱規則名稱描述
.MuiMobileStepper-dotActivedotActive如果 variant="dots" 且這是活動步驟，則應用於點的樣式。
.MuiMobileStepper-positionBottompositionBottom如果 position="bottom"，則應用於 root 元素的樣式。
.MuiMobileStepper-positionStaticpositionStatic如果 position="static"，則應用於 root 元素的樣式。
.MuiMobileStepper-positionToppositionTop如果 position="top"，則應用於 root 元素的樣式。

您可以使用以下其中一種客製化選項來覆寫元件的樣式

原始碼

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