步骤条

步骤条通过编号步骤传达进度。它提供了向导式的工作流程。

介绍

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

Joy UI 步骤条是使用相关组件的集合实现的

Stepper - 步骤的必需容器。默认渲染为 <ol>。
Step - 一个步骤。默认渲染为 <li>。
StepIndicator - 步骤的可选指示器。

第一步
2
第二步

<Stepper>
  <Step
    indicator={
      <StepIndicator variant="solid" color="primary">
        <Check />
      </StepIndicator>
    }
  >First</Step>
  ...
</Stepper>

基础

import Stepper from '@mui/joy/Stepper';
import Step from '@mui/joy/Step';

步骤 1
步骤 2
步骤 3

<Stepper sx={{ width: '100%' }}>
  <Step>Step 1</Step>
  <Step>Step 2</Step>
  <Step>Step 3</Step>
</Stepper>

<Stepper sx={{ width: '100%' }}>
  <Step>Step 1</Step>
  <Step>Step 2</Step>
  <Step>Step 3</Step>
</Stepper>

按 Enter 开始编辑

自定义

指示器

将 StepIndicator 作为元素传递给 Step 的 indicator 属性以创建数字或图标指示器。

StepIndicator 支持 Joy UI 的四种全局变体：soft（默认）、solid、outlined 和 plain。

1
订单已下达
2
审核中
3
已批准

<Stepper sx={{ width: '100%' }}>
  <Step
    indicator={
      <StepIndicator variant="solid" color="neutral">
        1
      </StepIndicator>
    }
  >
    Order placed
  </Step>
  <Step indicator={<StepIndicator variant="outlined">2</StepIndicator>}>
    In review
  </Step>
  <Step indicator={<StepIndicator>3</StepIndicator>}>Approved</Step>
</Stepper>

<Stepper sx={{ width: '100%' }}>
  <Step
    indicator={
      <StepIndicator variant="solid" color="neutral">
        1
      </StepIndicator>
    }
  >
    Order placed
  </Step>
  <Step indicator={<StepIndicator variant="outlined">2</StepIndicator>}>
    In review
  </Step>
  <Step indicator={<StepIndicator>3</StepIndicator>}>Approved</Step>
</Stepper>

按 Enter 开始编辑