StepperAPI

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

Demo 示範

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

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

原生元件的 props 屬性也可用。

名稱	類型	預設值	描述
activeStep	integer	0	設定啟用的步驟（從零開始的索引）。設為 -1 以停用所有步驟。
alternativeLabel	bool	false	若設為 'true' 且 orientation 為 horizontal，步驟標籤將置於圖示下方。
children	node	-	兩個或多個 `<Step />` 元件。
classes	object	-	覆寫或擴充套用至元件的樣式。詳情請參閱下方的CSS 類別 API。
component	elementType	-	用於根節點的元件。可以是字串（使用 HTML 元素）或元件。
connector	element	<StepConnector />	放置於每個步驟之間的元件。
nonLinear	bool	false	若設定，`Stepper` 將不協助控制線性流程的步驟。
orientation	'horizontal' \| 'vertical'	'horizontal'	元件方向（版面配置流程方向）。
sx	Array<func \| object \| bool> \| func \| object	-	系統屬性，允許定義系統覆寫以及額外的 CSS 樣式。詳情請參閱 `sx` 頁面。

ref 傳遞至根元素。

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

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

類別名稱	規則名稱	描述
.MuiStepper-alternativeLabel	alternativeLabel	若 `alternativeLabel={true}`，則套用至根元素的樣式。
.MuiStepper-horizontal	horizontal	若 `orientation="horizontal"`，則套用至根元素的樣式。
.MuiStepper-nonLinear	nonLinear	若 `nonLinear={true}`，則套用至根元素的樣式。
.MuiStepper-root	root	套用至根元素的樣式。
.MuiStepper-vertical	vertical	若 `orientation="vertical"`，則套用至根元素的樣式。

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

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