步骤条
# 1 适用场景
通常用于表示多步骤流程的进度,帮助用户了解当前任务或操作的进展情况。
# 2 基础功能
拥有设置数据来源、步骤条样式、文字是否居中、结束状态、是否简洁风格、步骤条间隔等功能;
# 2.1 数据来源
# 2.1.1 字典
可以选择AFC平台中在业务字典菜单中定义的字典类型;步骤条会显示此字典类型下定义的字典项;
说明:当选择选择数据源为字典时;步骤条数据会按照字典项设置的排序升序排列,步骤条标题显示值是字典项的名称;
效果展示:
# 2.1.2 数据实体
可以选择已有的数据实体,可配置值字段和显示字段。步骤条数据会把此实体数据展示出来;还可以对字段进行过滤、排序功能;
过滤条件
可以对实体数据根据字段进行设置过滤条件,会按照过滤条件显示满足结果的数据;
排序
可以选择字段进行排序;然后实体数据会按所选排序字段进行排序,默认是是降序;
# 2.1.3 自定义
可以自定义步骤条显示的数据;可以绑定变量选择常量,添加code 和 name 对应值,然后会自动生成一个变量,或者直接定义一个变量;
说明:选择数据源为自定义数据时;步骤条标题显示值是name,描述显示值是description
自定义数据格式如下:
[
{"code":"step1","name":"步骤1","description":"描述1"},
{"code":"step2","name":"步骤2","description":"描述2"}
]
# 2.2 步骤条样式
步骤条样式可设置横项和竖项;
效果展示:
# 2.3 文字是否居中
开启后步骤条标题将居中。
# 2.4 结束状态
可以设置结束状态显示风格;可选择wait/process/finish/error/success。
效果如下:
# 2.5 是否简洁风格
开启简洁模式后 align-center / description / direction / space 都将失效;
效果如下:
# 2.6 步骤条间隔
可以设置步骤条之间的间隔;有自适应 和自定义间隔。
- 自适应:会自动将每个步骤条在一行或一列的可用空间内均匀分配,保证每个步骤条在容器内的整体平均布局。
- 自定义间隔:可以通过自定义间隔设置步骤条之间的间距。当一行中的空间不足以容纳所有步骤时,步骤条会根据设定的间隔自动换行,将剩余的步骤分配到下一行,保证每个步骤条按照所设置的间隔进行分布。
效果如下:
# 3 设置默认值
步骤条中的每个步骤值会按顺序自动编号,第一个步骤值为 1,第二个步骤值为 2,依此类推;
例如设置默认在第一个步骤条,默认值设置 1