Stepper 步骤条组件
步骤条组件通过数字的步骤来表示进度。 它提供了一个类似于安装向导的用户流。
步骤条通过一系列逻辑和编号的步骤来显示当前操作的进度。 它们也可用于导航。 在保存一个步骤后，步骤条可能会显示短暂的反馈信息。
- 步骤的类型：可编辑的，不可编辑的，移动端的，可选择的
- 步骤条的类型：横向的，竖向的，线性的，非线性的
请注意：步骤条不再出现在 Material Design 指南中, 但 Material-UI 会继续支持此组件。
横向的步骤条
线性的步骤条
您可以在 activeStep 属性中传入一个初始值为0的当前步骤值来控制步骤条。 您也可以借助 orientation 属性来设置 步骤条 的方向。
这个例子把optional 属性放在第二个 步骤 的组件上，它展示了如何使用一个可选的步骤条。 请注意，您可以自行选择管理跳过一个可选的步骤。 一旦决定将一个特定步骤设置为可选的，您就必须配置这个属性 completed={false} 以表示即使激活的步骤索引超出了可选的步骤，步骤条并没有完成。
Select campaign settings...
Select campaign settings...
定制的步骤器
以下是自定义组件的一个示例。 您可以在样式重写文档页中了解有关此内容的更多信息。
What is an ad group anyways?
非线性的步骤条
非线性步进器允许用户在任何点输入多步流程。
此示例类似于常规的水平步进器，但步骤不再基于activeStep属性自动设置disabled = {true}。
在这里使用 StepButton 演示了一个可单击的步骤器标签，并且设置了 completed 标志。 但是，由于可以以非线性方式访问每个步骤，因此需要由您自己的实现来确定何时完成所有步骤（甚至是是否需要完成）。
Step 1: Select campaign settings...
Step 1: Select campaign settings...
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.
移动设备上的步骤条
该组件实现了适用于移动设备上的紧凑型步骤条。 如果你还在寻找灵感，请参阅 移动设备上的步骤条。
文本
本质上，这是一个被正确定位的 back/next 按钮。 您必须自己实现文本描述，但以下的示例也可供参考。
San Francisco – Oakland Bay Bridge, United States
带有幻灯片效果的文本
这个实例与之前的非常相似，不同之处在于使用 react-swipeable-views 以进行步骤的过渡动画。
San Francisco – Oakland Bay Bridge, United States