StepAPI

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

示範

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

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

原生元件的 Props 也可使用。

名稱	類型	預設值	描述
active	bool	-	設定 step 為 active。會傳遞至子元件。
children	node	-	應為 `Step` 子元件，例如 `StepLabel`、`StepContent`。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方CSS classes API 以取得更多詳細資訊。
completed	bool	-	將 step 標記為 completed。會傳遞至子元件。
component	elementType	-	用於根節點的元件。可以是字串 (用於 HTML 元素) 或元件。
disabled	bool	-	若為 `true`，則 step 會停用，若 `StepButton` 為 `Step` 的子元件，也會停用按鈕。會傳遞至子元件。
expanded	bool	false	展開 step。
index	integer	-	step 的位置。此 prop 預設為從父 Stepper 元件繼承的值。
last	bool	-	若為 `true`，則 Step 會顯示為最後渲染。此 prop 預設為從父 Stepper 元件繼承的值。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。

ref 會轉發到根元素。

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

這些 class name 對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slot。

Class name	Rule name	描述
.Mui-completed		若 `completed={true}`，則套用至根元素的 State class。
.MuiStep-alternativeLabel	alternativeLabel	若 `alternativeLabel={true}`，則套用至根元素的樣式。
.MuiStep-horizontal	horizontal	若 `orientation="horizontal"`，則套用至根元素的樣式。
.MuiStep-root	root	套用至根元素的樣式。
.MuiStep-vertical	vertical	若 `orientation="vertical"`，則套用至根元素的樣式。

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

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