Stepper 是一个用于展示进程步骤的组件，常用于表单提交、注册流程或任何需要分步骤的界面。它帮助用户明确当前所处的步骤并引导他们完成任务。本文将详细介绍 Stepper 组件的使用，包括所有属性、方法以及结合其他组件的示例。

1. 安装 Material UI

确保在你的项目中安装了 Material UI。如果尚未安装，可以使用以下命令：

npm install @mui/material @emotion/react @emotion/styled

2. Stepper 组件的基本结构

Stepper 组件可以通过以下基本结构创建：

import React from 'react';
import { Stepper, Step, StepLabel } from '@mui/material';

function HorizontalStepper() {
  const steps = ['选择课程', '填写信息', '确认订单'];

  return (
    <Stepper activeStep={0}>
      {steps.map((label) => (
        <Step key={label}>
          <StepLabel>{label}</StepLabel>
        </Step>
      ))}
    </Stepper>
  );
}

export default HorizontalStepper;

组件结构解析

• Stepper: 主容器，负责管理步骤的进度。
• Step: 每个步骤的容器。
• StepLabel: 每个步骤的标签。

3. Stepper 属性

3.1 常用属性

• activeStep: 表示当前活跃的步骤（索引值）。
• alternativeLabel: 是否显示步骤的替代标签（通常用在垂直方向）。
• connector: 自定义连接线组件。

示例：使用 activeStep 属性

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

4. 垂直 Stepper

垂直 Stepper 适合在空间较小的情况下使用：

import { Stepper, Step, StepLabel } from '@mui/material';

function VerticalStepper() {
  const steps = ['选择课程', '填写信息', '确认订单'];

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

5. 结合其他组件使用

5.1 按钮与状态管理

通常在 Stepper 中会结合按钮使用，以便用户能够在步骤之间导航。可以使用 useState 管理当前步骤。

import React, { useState } from 'react';
import { Stepper, Step, StepLabel, Button } from '@mui/material';

function StepperWithButtons() {
  const [activeStep, setActiveStep] = useState(0);
  const steps = ['选择课程', '填写信息', '确认订单'];

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  return (
    <div>
      <Stepper activeStep={activeStep}>
        {steps.map((label) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
      <div>
        <Button disabled={activeStep === 0} onClick={handleBack}>
          返回
        </Button>
        <Button variant="contained" onClick={handleNext}>
          {activeStep === steps.length - 1 ? '完成' : '下一步'}
        </Button>
      </div>
    </div>
  );
}

5.2 表单示例

你可以在每个步骤中包含表单，以收集用户信息：

function StepForm() {
  const [activeStep, setActiveStep] = useState(0);
  const steps = ['选择课程', '填写信息', '确认订单'];
  
  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  return (
    <div>
      <Stepper activeStep={activeStep}>
        {steps.map((label) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
      {activeStep === 0 && <div>这里是选择课程的表单</div>}
      {activeStep === 1 && <div>这里是填写信息的表单</div>}
      {activeStep === 2 && <div>这里是确认订单的内容</div>}
      <div>
        <Button disabled={activeStep === 0} onClick={handleBack}>
          返回
        </Button>
        <Button variant="contained" onClick={handleNext}>
          {activeStep === steps.length - 1 ? '完成' : '下一步'}
        </Button>
      </div>
    </div>
  );
}

6. 总结

Material UI 的 Stepper 组件为用户提供了一种清晰的步骤导航方式，适用于多种场景，包括表单提交和流程指导。通过结合其他组件，如按钮和表单，能够实现更加复杂和交互丰富的用户界面。

希望本文能帮助你更好地理解和使用 Material UI 的 Stepper 组件，提升用户体验和界面美观度！如果你有更多问题或者想要了解其他组件的使用，请随时提问！