mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-10 07:49:38 +08:00
66483cbf67
* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * fix: 点状步骤条样式修改 * feat: badge,steps,timeline对齐4.0 * BCE-JC-20760 feat: 合并冲突 Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>
8.3 KiB
8.3 KiB
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Steps 步骤条 | 0 | ⚙ 组件 | Steps | 68 |
步骤条组件
基本用法
{
"type": "page",
"body": [
{
"type": "steps",
"value": 1,
"steps": [
{
"title": "First",
"description": "this is description"
},
{
"title": "Second"
},
{
"title": "Last"
}
]
}
]
}
设置状态
{
"type": "page",
"body": {
"type": "steps",
"value": 1,
"status": "error",
"steps": [
{
"title": "First"
},
{
"title": "Second",
"description": "this is description"
},
{
"title": "Last"
}
]
}
}
指定步骤条方向
{
"type": "page",
"body": {
"type": "steps",
"mode": 'vertical',
"value": 1,
"steps": [
{
"title": "First",
"description": "this is description"
},
{
"title": "Second",
"description": "this is description"
},
{
"title": "Last",
"description": "this is description"
}
]
}
}
指定标签放置位置
{
"type": "page",
"body": {
"type": "steps",
"value": 1,
"labelPlacement": "vertical",
"steps": [
{
"title": "First",
"description": "this is description"
},
{
"title": "Second",
"description": "this is description"
},
{
"title": "Last",
"description": "this is description"
}
]
}
}
点状步骤条
{
"type": "page",
"body": {
"type": "steps",
"value": 1,
"progressDot": true,
"steps": [
{
"title": "First",
"description": "this is description"
},
{
"title": "Second",
"description": "this is description"
},
{
"title": "Last",
"description": "this is description"
}
]
}
}
数据映射
当前处于第几步统一通过 name
关联变量名,其他配置可通过 "${xxx}"
关联上下文变量。
{
"type": "page",
"data": {
"step": 1,
"status": "error",
"secondTitle": "Second"
},
"body": [
{
"type": "steps",
"name": "step",
"status": "${status}",
"steps": [
{
"title": "First",
"description": "this is description"
},
{
"title": "${secondTitle}"
},
{
"title": "Last"
}
]
}
]
}
接口映射
接口返回的数据也是一样,都会在同一个数据域,所以取值方式是一样的。
{
"type": "page",
"initApi": "/api/mock2/steps/get",
"body": [
{
"type": "steps",
"name": "step",
"status": "${status}",
"steps": [
{
"title": "First",
"description": "this is description"
},
{
"title": "Secord"
},
{
"title": "Last"
}
]
}
]
}
Form 中静态展示
{
"type": "page",
"body": {
"type": "form",
"initApi": "/api/mock2/steps/steps",
"body": [
{
"type": "steps",
"source": "${steps}",
"name": "current"
}
]
}
}
动态数据
远程拉取
除了可以通过数据映射获取当前数据域中的变量以外,source 还支持配置接口,格式为 API,用于动态返回选项组。
{
"type": "page",
"body": {
"type": "form",
"body": [
{
"type": "steps",
"name": "steps",
"source": "/api/mock2/steps/steps"
}
]
}
}
远程拉取接口时,返回的数据结构除了需要满足 amis 接口要求的基本数据结构 以外,必须用"steps"作为选项组的 key 值,如下:
{
"status": 0,
"msg": "",
"data": {
"steps": [
{
"title": "First",
"value": "first"
},
{
"title": "Secord",
"description": "this is description",
"value": "secord"
},
{
"title": "Last",
"value": "last"
}
]
}
}
数据域变量配置
1.9.1 及以上版本
{
"type": "page",
"data": {
"steps": [
{
"title": "First",
"description": "this is description"
},
{
"title": "Second"
},
{
"title": "Last"
}
]
},
"body": [
{
"type": "steps",
"name": "step",
"source": "${steps}"
}
]
}
自定义不同步骤以及状态
{
"type": "page",
"body": {
"type": "steps",
"value": "b",
"status": {
"a": "finish",
"b": "error",
"c": "wait"
},
"steps": [
{
"title": "First",
"value": "a"
},
{
"title": "Second",
"description": "this is description",
"value": "b"
},
{
"title": "Third",
"value": "c"
}
]
}
}
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string |
"steps" 指定为 步骤条 渲染器 |
|
steps | Array<step> | [] | 数组,配置步骤信息 |
source | API 或 数据映射 | 选项组源,可通过数据映射获取当前数据域变量、或者配置 API 对象 | |
name | string |
关联上下文变量 | |
value | string | number |
- |
设置默认值,注意不支持表达式 |
status | StepStatus | {[propName: string]: stepStatus;} | - |
状态 |
className | string |
- |
自定义类名 |
mode | horizontal | vertical |
horizontal |
指定步骤条方向。目前支持水平(horizontal)和竖直(vertical)两种方向 |
labelPlacement | horizontal | vertical |
horizontal |
指定标签放置位置,默认水平放图标右侧,可选 (vertical) 放图标下方 |
progressDot | boolean |
false |
点状步骤条 |
step
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
title | string | SchemaNode |
标题 | |
description | string | SchemaNode |
详细描述 | |
icon | string |
icon 名,支持 fontawesome v4 或使用 url | |
value | string |
value | |
className | string |
自定义类名 |
StepStatus
wait
| process
| finish
| error