【Material-UI】Stepper 组件详解：从基础到进阶应用

Material-UI 是 React 生态系统中广受欢迎的 UI 框架之一，提供了丰富的组件库来帮助开发者构建现代的用户界面。其中，Stepper 组件能够以清晰的步骤展示任务流程，适用于许多场景如表单、多步骤导航等。本文将详细介绍 Material-UI 中的 Stepper 组件，涵盖其基础功能与进阶应用。

一、Stepper 组件概述

1. 组件介绍

Stepper 组件用于显示一系列逻辑步骤的进度，通常用在多步骤表单、导航流程等场景。通过 Stepper，用户可以一目了然地了解当前进度，以及接下来需要完成的步骤。

Stepper 包含多个子组件：

• Stepper: 容器组件，包含所有步骤。
• Step: 每一个独立的步骤。
• StepLabel: 每个步骤的标签。
• StepContent: 可选的步骤内容，用于垂直步骤条。
• StepButton: 可选的步骤按钮，允许点击进入某个步骤。
• StepIcon: 可选的步骤图标。
• StepConnector: 可选的步骤间连接器。

通过这些组件的组合与定制，可以灵活实现不同样式和功能的步骤条。

2. 使用方式

以下是一个简单的 Stepper 使用示例：

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

const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];

export default function HorizontalStepper() {
  return (
    <Stepper activeStep={1}>
      {steps.map((label, index) => (
        <Step key={index}>
          <StepLabel>{label}</StepLabel>
        </Step>
      ))}
    </Stepper>
  );
}

二、水平 Stepper 的应用

1. 线性 Stepper

线性 Stepper 需要用户按顺序完成每一步骤。在这种模式下，用户必须按照预设的顺序完成所有步骤，无法跳过或重新选择某个步骤。

基本示例

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

在这个例子中，activeStep 用于控制当前处于哪个步骤（以 0 为起始索引）。orientation 属性可以设置为 "horizontal"，来定义水平步骤条。

可选步骤

你可以通过 optional 属性来设置可选步骤。可选步骤通常用于某些步骤不是必需时，用户可以跳过这些步骤。

<Step optional>
  <StepLabel>Optional Step</StepLabel>
</Step>

注意：即使步骤跳过了，你需要手动管理 completed 属性来确保步骤被正确标记为未完成。

2. 非线性 Stepper

非线性 Stepper 允许用户以任意顺序访问各个步骤。这种模式适用于一些步骤之间没有严格依赖关系的场景。

<Stepper activeStep={1} nonLinear>
  {steps.map((label, index) => (
    <Step key={label}>
      <StepButton onClick={() => handleStepClick(index)}>
        <StepLabel>{label}</StepLabel>
      </StepButton>
    </Step>
  ))}
</Stepper>

在这个例子中，StepButton 允许用户点击步骤标签来跳转到指定步骤，使用 nonLinear 属性实现非线性步骤流。

三、垂直 Stepper 的应用

垂直 Stepper 适用于步骤内容较多且需要展开显示的场景。通过 orientation 属性将 Stepper 设置为垂直方向。

<Stepper activeStep={1} orientation="vertical">
  {steps.map((label, index) => (
    <Step key={label}>
      <StepLabel>{label}</StepLabel>
      <StepContent>
        <Typography>{getStepContent(index)}</Typography>
        <Button onClick={handleNext}>Next</Button>
      </StepContent>
    </Step>
  ))}
</Stepper>

垂直步骤条非常适合在移动端设备上使用，因为它们在有限的屏幕空间中能更好地展示步骤内容。

四、进阶应用

1. 替代标签

Stepper 允许通过 alternativeLabel 属性将标签显示在步骤图标的下方。这种布局可以更好地利用空间，尤其是当步骤名称较长时。

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

2. 自定义 Stepper 样式

Stepper 组件允许通过自定义图标和连接器实现完全个性化的样式。例如，你可以自定义步骤图标为特定图形或颜色：

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

这种定制化可以在设计独特风格的应用时发挥极大的作用。

3. 错误步骤处理

Stepper 还支持显示错误步骤，例如当用户在某一步骤中输入不合法的内容时，可以通过设置 error 属性来提醒用户纠正。

<Step error>
  <StepLabel>Error in step</StepLabel>
</Step>

4. 步骤条的无障碍支持

无障碍支持是 Stepper 组件的重要特性之一。通过设置合适的 aria-label 和 aria-labelledby，确保所有用户都能够通过辅助技术访问和操作组件。

五、实际项目中的应用场景

1. 表单步骤流

Stepper 非常适合用于分步骤表单，尤其是那些需要逐步引导用户完成的场景。在电商网站中，结算流程通常会使用 Stepper 组件来引导用户完成各个步骤，例如填写收货地址、选择支付方式、确认订单等。

2. 流程导航

在一些复杂的应用中，用户可能需要遵循一系列步骤来完成任务，比如设置向导或安装流程。Stepper 组件能够为用户提供直观的进度展示，使其更好地掌握流程的进展情况。

六、注意事项

1. 步骤过多时的布局问题: 当步骤数量较多时，水平 Stepper 可能不适合，因为它会占用过多的横向空间。这时可以考虑使用垂直 Stepper 或缩短步骤名称。
2. 非线性 Stepper 的用户体验: 非线性步骤流的自由度较高，但需要谨慎处理各步骤的状态，确保用户能够清楚知道哪些步骤已完成、哪些步骤需要进一步操作。
3. 步骤状态管理: 在实际项目中，通常需要自行管理步骤状态（如是否完成、是否跳过），这需要在应用逻辑中增加更多的判断和操作。

七、总结

Material-UI 的 Stepper 组件提供了一种直观且强大的方式来展示多步骤流程，通过结合水平、垂直布局和定制化样式，开发者可以轻松创建符合项目需求的用户界面。无论是线性的任务流程，还是非线性的步骤导航，Stepper 都能很好地适应不同场景的需求。希望本文能帮助你更好地理解和使用 Stepper 组件，为用户提供更流畅的体验。

推荐：

• JavaScript
• react
• vue

---