Stepper

The Stepper widget is used to help navigate the user through a multi-step workflow, displaying and tracking progress as they walk through a sequence of steps.

Configuration Options

• Type
• Linear: Users are required to complete the steps in order.
• Non-linear: Users can freely navigate between steps and complete them in any order.
• Steps
• Create and define the configuration for each step of a workflow.
• Label: Sets the label to be displayed for the step in the widget.
• On click: Set event(s) to be triggered when the step is clicked in the widget.
• Is completed: Set a boolean variable to be used a check to determine when a step has been completed.
• Icon: Set the icon to be displayed for the step.
• Style
• Template
  • Text only: Displays ordered numbers for each step in the widget.
  • Use icons: Displays icons for each step in the widget. Icons can configured on a per-step basis.
• Show step number: Toggle on to also display step numbers on the widget when set to linear stepper type and set to use icons.
• Completed color: Sets the color for a step when it has been completed, triggered by when the boolean variable set for the step is true.
• Active color: Sets the color for the currently active step the user is on.

---

中文翻译

Stepper

Stepper（步骤导航器） 组件用于引导用户完成多步骤工作流，在用户按顺序执行一系列步骤时显示并跟踪进度。

配置选项

• 类型（Type）
• 线性（Linear）： 用户必须按顺序完成步骤。
• 非线性（Non-linear）： 用户可以在步骤之间自由导航，并以任意顺序完成。
• 步骤（Steps）
• 创建并定义工作流中每个步骤的配置。
• 标签（Label）： 设置组件中该步骤显示的标签。
• 点击时（On click）： 设置在组件中点击该步骤时触发的事件。
• 已完成（Is completed）： 设置一个布尔变量，用于判断步骤是否已完成。
• 图标（Icon）： 设置该步骤显示的图标。
• 样式（Style）
• 模板（Template）
  • 仅文本（Text only）： 在组件中为每个步骤显示有序数字。
  • 使用图标（Use icons）： 在组件中为每个步骤显示图标。图标可按步骤单独配置。
• 显示步骤编号（Show step number）： 开启后，当设置为线性步骤导航器类型且使用图标时，组件上也会显示步骤编号。
• 已完成颜色（Completed color）： 设置步骤完成时的颜色，当为该步骤设置的布尔变量为 true 时触发。
• 活动颜色（Active color）： 设置用户当前所在活动步骤的颜色。