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}。
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: 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.
移动设备上的步进器
该组件实现了适用于移动设备的紧凑型步进器。 有关其详情, 请参阅 移动步骤。
Text
This is essentially a back/next button positioned correctly. You must implement the textual description yourself, however, an example is provided below for reference.
San Francisco – Oakland Bay Bridge, United States
Text with Carousel effect
这个实例与之前的非常相似，不同之处在于使用 react-swipeable-views 以进行步骤转换。
San Francisco – Oakland Bay Bridge, United States