StepperAPI
React Stepper 元件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。
範例
Import
import Stepper from '@mui/joy/Stepper';
// or
import { Stepper } from '@mui/joy';閱讀關於最小化 bundle 大小的指南，以了解它們之間的差異。
也提供原生元件的 Props。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| children | node | - | 如果未設定 |
| component | elementType | - | 用於根節點的元件。可以是使用 HTML 元素的字串或元件。 |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | 元件方向。 |
| size | 'lg' | 'md' | 'sm' | string | 'md' | 元件的大小。它接受 'sm' 和 'lg' 之間的 theme 值。 若要了解如何將自訂大小新增至元件，請查看主題元件—擴展尺寸。 |
| slotProps | { root?: func | object } | {} | 用於每個 slot 內部的 props。 |
| slots | { root?: elementType } | {} | 用於每個 slot 內部的元件。 請參閱下方的Slots API 以了解更多詳細資訊。 |
| sx | Array<func | object | bool> | func | object | - | 系統屬性，允許定義系統覆寫以及其他 CSS 樣式。 請參閱 `sx` 頁面 以了解更多詳細資訊。 |
ref 傳遞到根元素。主題預設 props
您可以使用 JoyStepper 透過主題變更此元件的預設 props。
若要了解如何自訂 slot，請查看覆寫元件結構指南。
| Slot 名稱 | Class name | Default component | 描述 |
|---|---|---|---|
| root | .MuiStepper-root | 'ol' | 呈現根的元件。 |
這些 class name 對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slot。
| Class name | Rule name | 描述 |
|---|---|---|
| .MuiStepper-horizontal | horizontal | 如果 orientation="horizontal"，則套用至根元素的 Class name。 |
| .MuiStepper-sizeLg | sizeLg | 如果 size="lg"，則套用至根元素的 Class name。 |
| .MuiStepper-sizeMd | sizeMd | 如果 size="md"，則套用至根元素的 Class name。 |
| .MuiStepper-sizeSm | sizeSm | 如果 size="sm"，則套用至根元素的 Class name。 |
| .MuiStepper-vertical | vertical | 如果 orientation="vertical"，則套用至根元素的 Class name。 |
您可以使用以下自訂選項之一覆寫元件的樣式
- 使用全域 class name。
- 在自訂主題中使用 rule name 作為元件
styleOverrides屬性的一部分。
原始碼
如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。