---
order: 1
navTitle: 步骤条
---
# SuperPage组件-步骤条

步骤条是引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤。步骤条组件可以配合其他组件及交互一起使用，实现达到流程每进行一步时，步骤条状态也随之变化的效果：

![步骤条](./images/bzt.gif)

示例地址：[步骤条](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E6%AD%A5%E9%AA%A4%E6%9D%A1)

## 使用步骤条组件{#use}

步骤条组件可以根据需求设置多个步骤选项，并结合[按钮](../common/button.md)组件、[多页面板](../layout/panelbook.md)组件，及[改变组件属性](../../design/action/README.md)交互、[切换多页面板](../../design/action/README.md)交互一起使用。
实现思路：

1. 完成[多页面板](../layout/panelbook.md)中的内容制作和按钮
2. 设置步骤条组件内容
3. 分别给多页面板中的按钮添加[改变组件属性](../../design/action/README.md)交互、[切换多页面板](../../design/action/README.md)交互实现步骤条的状态动态进行变化，如点击下一步时，步骤条进行到下一个步骤并切换多页面板

具体操作步骤如下：

![步骤条](./images/stepszz.gif)

1. 设置步骤条子项：在**属性栏**>**组件**>**子项设置**，设置子项属性，新添加的步骤条组件默认会有三个子项`步骤1`、`步骤2`、`步骤3`
2. 下拉选择默认选项为`步骤2`，也可通过[表达式](../../../../exp/README.md)获取
3. 在多页面板的第1页添加**下一步**按钮，设置按钮的交互：
   - 设置组件属性：**选择组件**->`步骤条1`，**属性名**->`value`，**属性值**->`步骤2`
   - 切换多页面板：**目标对象**->`多页面板1`，**目标面板**->`下一页`
4. 多页面板中其他页面中的**上一页**及**下一页**的按钮交互中，只需修改对应的**设置组件属性->属性值**，**切换多页面板->目标面板**

## 属性介绍{#attribute}

### 子项设置{#subitem}

**子项列表设置**

在设置子项对话框的左侧，可以设置子项列表。步骤条默认包含3个子项，内容分别为`步骤1`、`步骤2`、`步骤3`，可自定义修改或删除，点击添加可添加新的子项。点击添加默认在一级子项尾部添加新的子项，名称默认为步骤+数字。子项列表具体设置如下所示：

- 添加：点击添加按钮可添加新的选项
- 搜索：点击搜索按钮可对选项内容进行搜索
- 复制：点击复制按钮可复制选项，属性会保持一致，系统会自动通过ID加以区分
- 删除：点击删除按钮即可删除当前选项
- 移动：选中子项拖动即可移动子项的顺序

**子项选项设置**

选中某个子项，在设置子项对话框的右侧，可以设置该子项的步骤内容和交互。具体属性内容如下：

![控件设置](./images/2020-10-28-16-03-16.png)

- 内容：即步骤条上显示的子项标题
- 描述：对该步骤进行补充说明的描述性内容，可以为空
- 显示：设置该步骤在满足一定条件时是否显示，可使用[表达式](../../../../exp/README.md)，如当登录人员下拉框的值为管理员时不显示步骤3，设置步骤3的显示条件表达式为`[登录人员].[值]!="admin"`
- 交互：点击对应步骤可触发的交互动作，如打开链接、刷新数据等，点击**添加动作并**设置对应属性即可，可参考文档[交互](../../design/action/README.md)。

### 步骤条{#stepbar}

在**属性栏**>**样式**>**步骤条**中可设置整个步骤条组件的属性和样式。

#### 排列

设置步骤条的布局方式，有3种布局方式：

![排列方式](./images/2020-10-28-16-04-02.png)

- 横向：默认为横向布局，当为横向布局时，可设置步骤条文字的**对齐**方式
  - 对齐：**左对齐**或者**居中对齐**
- 纵向：可设置为纵向布局，即步骤条的进度走向为从上至下
- 箭头：即步骤形状为箭头形，当布局为箭头时，可勾选**是否显示最后一个箭头**
  - **是否显示最后一个箭头**：默认勾选，且可设置箭头的**颜色**及**宽度**，宽度的单位为px

| 横向 | 纵向 | 箭头 |
| --- | --- | --- |
|![横向](./images/2020-10-28-11-06-03.png)|![纵向](./images/2020-10-28-11-06-42.png)|![箭头](./images/2020-10-28-11-05-29.png)|

#### 状态样式

用于标注步骤条的特殊值，或者设置鼠标在步骤条上进行操作时，步骤条的状态样式，主要有以下几种类型：

![条件样式](./images/2020-10-28-16-04-52.png)

- 突出显示：设置当步骤条的值为某个特殊值时，选项的显示样式，参考文档[突出显示](../../design/action/README.md)
- 步骤条状态样式：当鼠标**悬停**、**聚焦**时步骤条及选项的样式效果，参考文档[步骤条状态样式](../../design/style/README.md)

### 步骤属性{#step}

在**属性栏**>**样式**>**步骤**可设置步骤条中的步骤子项的字体、步骤线、背景等样式。

#### 步骤线

即每个步骤间相连的线条，可设置步骤线的线型、颜色、宽度及步骤线位置。

![步骤线](./images/2020-10-28-16-05-40.png)

**步骤线位置**：根据数值调整步骤线位置，即步骤线与步骤条组件顶部的距离，数值不能小于0，单位为px。0默认为居中位置，1为最顶端的位置

### 数字样式{#number}

即步骤条中标记当前是第几步的数字标记，显示在步骤的标题前，在**属性栏**>**样式**>**数字**可设置数字的是否显示，及字体、背景、宽高等样式。

![数字样式](./images/2020-10-28-16-07-25.png)

- **显示**：设置步骤数字的显示隐藏，当显示数字时，可勾选**步骤完成后显示“√”**
- **宽高**：设置数字位置的宽度及高度，支持自定义宽高，输入大于0的数字即可，单位为px