Stepper 步骤条组件

步骤条组件通过数字的步骤来表示进度。它提供了一个类似于安装向导的用户流。

步骤条通过一系列逻辑和编号的步骤来显示当前操作的进度。它们也可用于导航。在保存一个步骤后，步骤条可能会显示短暂的反馈信息。

步骤的类型：可编辑的，不可编辑的，移动端的，可选择的
步骤条的类型：横向的，竖向的，线性的，非线性的

水平步骤条

Horizontal steppers are ideal when the contents of one step depend on an earlier step.

Avoid using long step names in horizontal steppers.

线性步骤条

A linear stepper allows the user to complete the steps in sequence.

The Stepper can be controlled by passing the current step index (zero-based) as the activeStep prop. Stepper orientation is set using the orientation prop.

This example also shows the use of an optional step by placing the optional prop on the second Step component. Note that it's up to you to manage when an optional step is skipped. Once you've determined this for a particular step you must set completed={false} to signify that even though the active step index has gone beyond the optional step, it's not actually complete.

Select campaign settings

Create an ad groupOptional

Create an ad

Step 1

非线性的步骤条

Non-linear steppers allow the user to enter a multi-step flow at any point.

This example is similar to the regular horizontal stepper, except steps are no longer automatically set to disabled={true} based on the activeStep prop.

The use of the StepButton here demonstrates clickable step labels, as well as setting the completed flag. However because steps can be accessed in a non-linear fashion, it's up to your own implementation to determine when all steps are completed (or even if they need to be completed).

Step 1

替代标签

Labels can be placed below the step icon by setting the alternativeLabel prop on the Stepper component.

Select master blaster campaign settings

Create an ad group

Create an ad

<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>

Press Enter to start editing

错误步骤

Select campaign settings

Create an ad groupAlert message

Create an ad

自定义水平步骤条

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.

Select campaign settings

Create an ad group

Create an ad

Select campaign settings

Create an ad group

Create an ad

<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>

Press Enter to start editing

垂直步骤条

Vertical steppers are designed for narrow screen sizes. They are ideal for mobile. All the features of the horizontal stepper can be implemented.

Select campaign settings

For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.

Create an ad group

Create an adLast step

文本

The content of a step is unmounted when closed. If you need to make the content available to search engines or render expensive component trees inside your modal while optimizing for interaction responsiveness it might be a good idea to keep the step mounted with:

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

移动设备上的步骤条

This component implements a compact stepper suitable for a mobile device. It has more limited functionality than the vertical stepper. See mobile steps for its inspiration.

The mobile stepper supports three variants to display progress through the available steps: text, dots, and progress.

文本

The current step and total number of steps are displayed as text.

Select campaign settings

For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.

1 / 3

点状

This demo uses react-swipeable-views to create a carousel.

San Francisco – Oakland Bay Bridge, United States

点状

Use dots when the number of steps is small.

Progress 进度条组件

Use a progress bar when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps).

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.