【Material-UI】Stepper 组件中的 Vertical Stepper 和 Mobile Stepper 详解

Material-UI 是 React 生态系统中极为流行的 UI 库，提供了许多组件以简化开发者的界面构建过程。Stepper 组件是 Material-UI 中用于多步骤流程展示的强大工具，特别适合需要引导用户完成一系列任务或步骤的场景。本文将详细介绍 Stepper 组件中的两个主要类型：Vertical Stepper 和 Mobile Stepper，帮助开发者更好地掌握其用法及特性。

一、Vertical Stepper 组件概述

1. 组件介绍

Vertical Stepper 是 Stepper 组件的一个垂直布局版本，设计初衷是为了适应移动设备及狭窄的屏幕空间。与 Horizontal Stepper 相比，它可以在垂直方向上展开步骤内容，节省横向空间。因此，Vertical Stepper 尤其适合在手机端或小型屏幕上使用。

它继承了 Horizontal Stepper 的所有功能，开发者可以轻松地将已有的水平步骤转换为垂直布局。每个步骤依次呈现，用户能够清晰地看到任务流程的顺序及内容。

2. 核心功能

Vertical Stepper 的主要功能包括：

• 步骤展开：当用户进入某个步骤时，其内容会展开并显示在该步骤下方，而其他步骤保持折叠状态。
• 步骤内容卸载：默认情况下，当步骤关闭时，其内容会自动卸载，以提升性能。如果希望在关闭时保留步骤内容，可以通过 TransitionProps 来设置。

例如，保持内容在关闭时不被卸载：

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

此设置有助于保留需要在后台运行的昂贵组件或希望内容被搜索引擎索引的情况。

二、Vertical Stepper 的使用场景

1. 适合移动端的垂直布局

在移动设备上，通常由于屏幕宽度的限制，横向布局可能不适合展示多步骤流程。在这种情况下，Vertical Stepper 的垂直展示方式更加直观，同时不会牺牲屏幕空间。

例如，在一个广告创建流程中，用户可以依次配置广告的设置、广告组、广告创意等步骤，每个步骤都有详细的内容展开展示，帮助用户逐步完成复杂的操作。

<Stepper orientation="vertical">
  <Step>
    <StepLabel>选择广告设置</StepLabel>
    <StepContent>
      {/* 广告设置表单内容 */}
    </StepContent>
  </Step>
  <Step>
    <StepLabel>创建广告组</StepLabel>
    <StepContent>
      {/* 广告组创建表单内容 */}
    </StepContent>
  </Step>
  <Step>
    <StepLabel>创建广告</StepLabel>
    <StepContent>
      {/* 广告创意配置 */}
    </StepContent>
  </Step>
</Stepper>

2. 高效的步骤管理

在表单复杂、需要展示多个步骤的情况下，Vertical Stepper 提供了一个清晰的导航路径。每当用户完成一个步骤时，下一步自动展开，前一步骤则折叠起来，避免信息过载的同时保证用户体验流畅。

三、Mobile Stepper 组件概述

1. 组件介绍

Mobile Stepper 是为移动设备设计的紧凑型步骤组件。与 Vertical Stepper 相比，它的功能较为简化，但仍然非常适合在小屏幕上使用。Mobile Stepper 提供了三种不同的显示进度方式：文本、点和进度条，帮助用户更直观地了解当前所处步骤。

2. Mobile Stepper 的核心功能

Mobile Stepper 支持以下三种不同的展示方式：

1) Text 文本显示

通过文本显示当前步骤与总步骤数，例如 “1/3”，适合步骤数量较少且需要清晰展示进度的情况。

<MobileStepper
  variant="text"
  steps={3}
  position="static"
  activeStep={1}
  nextButton={<Button size="small">Next</Button>}
  backButton={<Button size="small">Back</Button>}
/>

2) Dots 小圆点显示

当步骤数量较少时，可以选择使用圆点来展示当前的进度。例如，创建广告流程时，前三个步骤使用小圆点展示，直观且节省空间。

<MobileStepper
  variant="dots"
  steps={3}
  position="static"
  activeStep={1}
  nextButton={<Button size="small">Next</Button>}
  backButton={<Button size="small">Back</Button>}
/>

3) Progress 进度条显示

当步骤数量较多或步骤较为复杂时，可以使用进度条来展示整个流程的进展情况。进度条不仅可以展示当前的步骤，还能通过动态改变条的长度来直观展示用户的整体进度。

<MobileStepper
  variant="progress"
  steps={6}
  position="static"
  activeStep={3}
  nextButton={<Button size="small">Next</Button>}
  backButton={<Button size="small">Back</Button>}
/>

3. 使用场景

1) 简化的移动端流程引导

Mobile Stepper 由于其紧凑的设计，特别适合在移动设备上使用。例如，在电商应用中，用户完成订单支付前，可能需要经历多个步骤的确认过程，Mobile Stepper 提供了一个简洁的方式来引导用户逐步完成这些步骤。

2) 精简的多步骤导航

当你需要在移动设备上引导用户完成一系列步骤，而不希望占用过多的屏幕空间时，Mobile Stepper 是非常好的选择。无论是使用文本、点还是进度条，Mobile Stepper 都能够提供简洁而有效的用户导航。

四、Vertical Stepper 与 Mobile Stepper 的区别

虽然两者都是为了在移动设备上实现步骤导航的组件，但它们的设计和使用场景略有不同：

• Vertical Stepper 更适合在垂直方向上展示较复杂的步骤内容，每个步骤展开时可以包含丰富的表单和组件，适合复杂的流程场景。
• Mobile Stepper 则更侧重于简洁的步骤展示，其内容较为精简，且适用于屏幕空间有限的场景。

在选择这两个组件时，应根据具体需求决定：如果需要用户进行复杂的交互操作或填写表单，Vertical Stepper 是更好的选择；如果只需要引导用户完成简洁的任务，Mobile Stepper 则更为合适。

五、总结

Material-UI 的 Stepper 组件提供了强大的多步骤流程管理能力，Vertical Stepper 和 Mobile Stepper 分别为移动设备上的复杂和简化场景提供了解决方案。通过合理使用这些组件，开发者可以为用户提供清晰的引导流程和优秀的用户体验。

推荐：

• JavaScript
• react
• vue

---