步进器

步进器通过编号步骤传达进度。它提供类似向导的工作流程。

步进器通过一系列逻辑和编号步骤显示进度。它们也可以用于导航。步进器可以在步骤保存后显示瞬时反馈消息。

步骤类型：可编辑、不可编辑、移动端、可选
步进器类型：水平、垂直、线性、非线性

介绍

步进器组件通过一系列逻辑和编号步骤显示进度。它支持桌面和移动端视口的水平和垂直方向。

步进器是使用相关组件的集合实现的

Stepper：步骤的容器。
Step：序列中的单个步骤。
Step Label：步骤的标签。
Step Content：步骤的可选内容。
Step Button：步骤的可选按钮。
Step Icon：步骤的可选图标。
Step Connector：步骤之间可选的自定义连接器。

基础知识

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

水平步进器

当一个步骤的内容依赖于较早的步骤时，水平步进器是理想的选择。

避免在水平步进器中使用过长的步骤名称。

线性

线性步进器允许用户按顺序完成步骤。

可以通过传递当前步骤索引（从零开始）作为 activeStep 属性来控制 Stepper。Stepper 的方向使用 orientation 属性设置。

此示例还展示了如何使用可选步骤，方法是将 optional 属性放置在第二个 Step 组件上。请注意，何时跳过可选步骤由您自己管理。一旦您确定了特定步骤的这一点，您必须设置 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

请参阅下面的文档，以获取此处提及的组件的所有可用属性和类的完整参考。