StepAPI

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

範例

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

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

閱讀關於最小化 bundle size 的指南，以瞭解它們之間的差異。

原生元件的 Props 也可使用。

名稱	類型	預設值	描述
active	bool	false	如果 `true`，則會附加 active className。您可以從 Stepper 的 `sx` prop 自訂 active 狀態。
children	node	-	如果未設定 `src`，則用於在 Step 內呈現圖示或文字元素。這可以是元素，或僅僅是字串。
completed	bool	false	如果 `true`，則會附加 completed className。您可以從 Stepper 的 `sx` prop 自訂 active 狀態。
component	elementType	-	用於根節點的元件。可以是使用 HTML 元素的字串或元件。
disabled	bool	false	如果 `true`，則會附加 active className。您可以從 Stepper 的 `sx` prop 自訂 active 狀態。
indicator	node	-	要顯示的指示器。如果提供，將使用包裝器元素。
orientation	'horizontal' \| 'vertical'	'horizontal'	元件方向。
slotProps	{ indicator?: func \| object, root?: func \| object }	{}	用於每個 slot 內部的 props。
slots	{ indicator?: elementType, root?: elementType }	{}	用於每個 slot 內部的元件。請參閱下方Slots API 以取得更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。

ref 會轉發到根元素。

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

若要瞭解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱	Class name	預設元件	描述
root	.MuiStep-root	`'li'`	呈現 root 的元件。
indicator	.MuiStep-indicator	`'div'`	呈現指示器的元件。

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

Class name	Rule name	描述
.Mui-active		如果 `active` 為 true，則套用至根元素的 Class name。
.Mui-completed		如果 `completed` 為 true，則套用至根元素的 Class name。
.Mui-disabled		如果 `disabled` 為 true，則套用至根元素的 Class name。
.MuiStep-horizontal	horizontal	如果 `orientation="horizontal"`，則套用至根元素的 Class name。
.MuiStep-vertical	vertical	如果 `orientation="vertical"`，則套用至根元素的 Class name。

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

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