步進器

步進器透過編號步驟傳達進度。它提供類似精靈的工作流程。

步進器顯示通過一連串邏輯和編號步驟的進度。它們也可以用於導航。步進器可能會在步驟儲存後顯示暫時性的意見回饋訊息。

步驟類型：可編輯、不可編輯、行動裝置、可選
步進器類型：水平、垂直、線性、非線性

簡介

Stepper 組件顯示通過一連串邏輯和編號步驟的進度。它支援桌面和行動裝置視口的水平和垂直方向。

步進器是使用相關組件的集合來實作的

Stepper：步驟的容器。
Step：序列中的個別步驟。
Step Label：Step 的標籤。
Step Content：Step 的可選內容。
Step Button：Step 的可選按鈕。
Step Icon：Step 的可選圖示。
Step Connector：步驟之間的可選自訂連接器。

基礎

import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';

水平步進器

當一個步驟的內容取決於先前的步驟時，水平步進器是理想的選擇。

避免在水平步進器中使用過長的步驟名稱。

線性

線性步進器允許使用者依序完成步驟。

Stepper 可以通過傳遞當前步驟索引（從零開始）作為 activeStep 屬性來控制。Stepper 方向是使用 orientation 屬性設定的。

此範例也顯示了通過在第二個 Step 組件上放置 optional 屬性來使用可選步驟。請注意，何時跳過可選步驟取決於您自己管理。一旦您為特定步驟確定了這一點，您必須設定 completed={false} 以表示即使活動步驟索引已超過可選步驟，但實際上尚未完成。

選擇廣告活動設定

建立廣告群組選填

建立廣告

步驟1

非線性

非線性步進器允許使用者在任何點進入多步驟流程。

此範例與常規水平步進器類似，除了步驟不再根據 activeStep 屬性自動設定為 disabled={true}。

此處 StepButton 的使用示範了可點擊的步驟標籤，以及設定 completed 標誌。但是，由於步驟可以非線性方式存取，因此何時完成所有步驟（甚至是否需要完成）取決於您自己的實作。

步驟1

替代標籤

可以通過在 Stepper 組件上設定 alternativeLabel 屬性，將標籤放置在步驟圖示下方。

選擇主推廣告活動設定

建立廣告群組

建立廣告

<Stepper activeStep={1} alternativeLabel>
  {steps.map((label) => (
    <Step key={label}>
      <StepLabel>{label}</StepLabel>
    </Step>
  ))}
</Stepper>

<Stepper activeStep={1} alternativeLabel>
  {steps.map((label) => (
    <Step key={label}>
      <StepLabel>{label}</StepLabel>
    </Step>
  ))}
</Stepper>

按下 Enter 開始編輯

錯誤步驟

選擇廣告活動設定

建立廣告群組警示訊息

建立廣告

自訂水平步進器

以下是如何自訂組件的範例。您可以在覆寫文件頁面中了解更多相關資訊。

選擇廣告活動設定

建立廣告群組

建立廣告

選擇廣告活動設定

建立廣告群組

建立廣告

<Stepper alternativeLabel activeStep={1} connector={<QontoConnector />}>
  {steps.map((label) => (
    <Step key={label}>
      <StepLabel StepIconComponent={QontoStepIcon}>{label}</StepLabel>
    </Step>
  ))}
</Stepper>
<Stepper alternativeLabel activeStep={1} connector={<ColorlibConnector />}>
  {steps.map((label) => (
    <Step key={label}>
      <StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel>
    </Step>
  ))}
</Stepper>

<Stepper alternativeLabel activeStep={1} connector={<QontoConnector />}>
  {steps.map((label) => (
    <Step key={label}>
      <StepLabel StepIconComponent={QontoStepIcon}>{label}</StepLabel>
    </Step>
  ))}
</Stepper>
<Stepper alternativeLabel activeStep={1} connector={<ColorlibConnector />}>
  {steps.map((label) => (
    <Step key={label}>
      <StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel>
    </Step>
  ))}
</Stepper>

按下 Enter 開始編輯

垂直步進器

垂直步進器專為窄螢幕尺寸設計。它們非常適合行動裝置。水平步進器的所有功能都可以實作。

選擇廣告活動設定

對於您建立的每個廣告活動，您可以控制您願意在點擊和轉換上花費多少、您希望廣告顯示在哪些網路和地理位置，以及更多。

建立廣告群組

建立廣告最後步驟

效能

步驟的內容在關閉時會卸載。如果您需要使內容可供搜尋引擎使用，或在優化互動回應能力時在您的模組內渲染昂貴的組件樹，則最好使用以下方式保持步驟掛載：

<StepContent TransitionProps={{ unmountOnExit: false }} />

行動裝置步進器

此組件實作了適用於行動裝置的精簡步進器。它的功能比垂直步進器更有限。請參閱行動裝置步驟以獲取其靈感。

行動裝置步進器支援三種變體，以顯示通過可用步驟的進度：文字、點和進度。

文字

目前的步驟和步驟總數以文字形式顯示。

選擇廣告活動設定

對於您建立的每個廣告活動，您可以控制您願意在點擊和轉換上花費多少、您希望廣告顯示在哪些網路和地理位置，以及更多。

1 / 3

點

當步驟數量很少時，請使用點。

進度

當步驟很多時，或者如果在此過程中需要插入步驟（根據對先前步驟的回應），請使用進度條。

API

請參閱下面的文件，以獲取此處提及的組件的所有屬性和類別的完整參考。