amis/docs/zh-CN/components/steps.md
qiaoganggang 43f1d90955
fix: steps恢复子标题 (#4987)
* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* fix: 点状步骤条样式修改

* feat: steps样式调整

* feat: 补充steps单测

Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>
2022-07-26 20:52:13 +08:00

384 lines
9.1 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Steps 步骤条
description:
type: 0
group: ⚙ 组件
menuName: Steps
icon:
order: 68
---
步骤条组件
## 基本用法
```schema
{
"type": "page",
"body": [
{
"type": "steps",
"value": 1,
"steps": [
{
"title": "First",
"subTitle": "this is subTitle",
"description": "this is description"
},
{
"title": "Second"
},
{
"title": "Last"
}
]
}
]
}
```
## 设置状态
```schema
{
"type": "page",
"body": {
"type": "steps",
"value": 1,
"status": "error",
"steps": [
{
"title": "First"
},
{
"title": "Second",
"subTitle": "this is subTitle",
"description": "this is description"
},
{
"title": "Last"
}
]
}
}
```
## 指定步骤条方向
```schema
{
"type": "page",
"body": {
"type": "steps",
"mode": 'vertical',
"value": 1,
"steps": [
{
"title": "First",
"subTitle": "this is subTitle",
"description": "this is description"
},
{
"title": "Second",
"subTitle": "this is subTitle",
"description": "this is description"
},
{
"title": "Last",
"subTitle": "this is subTitle",
"description": "this is description"
}
]
}
}
```
## 指定标签放置位置
```schema
{
"type": "page",
"body": {
"type": "steps",
"value": 1,
"labelPlacement": "vertical",
"steps": [
{
"title": "First",
"subTitle": "this is subTitle",
"description": "this is description"
},
{
"title": "Second",
"subTitle": "this is subTitle",
"description": "this is description"
},
{
"title": "Last",
"subTitle": "this is subTitle",
"description": "this is description"
}
]
}
}
```
## 点状步骤条
```schema
{
"type": "page",
"body": {
"type": "steps",
"value": 1,
"progressDot": true,
"steps": [
{
"title": "First",
"subTitle": "this is subTitle",
"description": "this is description"
},
{
"title": "Second",
"subTitle": "this is subTitle",
"description": "this is description"
},
{
"title": "Last",
"subTitle": "this is subTitle",
"description": "this is description"
}
]
}
}
```
## 数据映射
当前处于第几步统一通过 `name` 关联变量名,其他配置可通过 `"${xxx}"` 关联上下文变量。
```schema
{
"type": "page",
"data": {
"step": 1,
"status": "error",
"secondTitle": "Second"
},
"body": [
{
"type": "steps",
"name": "step",
"status": "${status}",
"steps": [
{
"title": "First",
"subTitle": "this is subTitle",
"description": "this is description"
},
{
"title": "${secondTitle}"
},
{
"title": "Last"
}
]
}
]
}
```
## 接口映射
接口返回的数据也是一样,都会在同一个数据域,所以取值方式是一样的。
```schema
{
"type": "page",
"initApi": "/api/mock2/steps/get",
"body": [
{
"type": "steps",
"name": "step",
"status": "${status}",
"steps": [
{
"title": "First",
"subTitle": "this is subTitle",
"description": "this is description"
},
{
"title": "Secord"
},
{
"title": "Last"
}
]
}
]
}
```
## Form 中静态展示
```schema
{
"type": "page",
"body": {
"type": "form",
"initApi": "/api/mock2/steps/steps",
"body": [
{
"type": "steps",
"source": "${steps}",
"name": "current"
}
]
}
}
```
## 动态数据
### 远程拉取
除了可以通过数据映射获取当前数据域中的变量以外source 还支持配置接口,格式为 API用于动态返回选项组。
```schema
{
"type": "page",
"body": {
"type": "form",
"body": [
{
"type": "steps",
"name": "steps",
"source": "/api/mock2/steps/steps"
}
]
}
}
```
远程拉取接口时,返回的数据结构除了需要满足 amis 接口要求的基本数据结构 以外,必须用"steps"作为选项组的 key 值,如下:
```json
{
"status": 0,
"msg": "",
"data": {
"steps": [
{
"title": "First",
"subTitle": "this is sub title",
"value": "first"
},
{
"title": "Secord",
"description": "this is description",
"value": "secord"
},
{
"title": "Last",
"value": "last"
}
]
}
}
```
### 数据域变量配置
> 1.9.1 及以上版本
```schema
{
"type": "page",
"data": {
"steps": [
{
"title": "First",
"subTitle": "this is subTitle",
"description": "this is description"
},
{
"title": "Second"
},
{
"title": "Last"
}
]
},
"body": [
{
"type": "steps",
"name": "step",
"source": "${steps}"
}
]
}
```
## 自定义不同步骤以及状态
```schema
{
"type": "page",
"body": {
"type": "steps",
"value": "b",
"status": {
"a": "finish",
"b": "error",
"c": "wait"
},
"steps": [
{
"title": "First",
"value": "a"
},
{
"title": "Second",
"subTitle": "this is subTitle",
"description": "this is description",
"value": "b"
},
{
"title": "Third",
"value": "c"
}
]
}
}
```
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| -------------- | --------------------------------------------------------------------------------- | ------------ | -------------------------------------------------------------------- |
| type | `string` | | `"steps"` 指定为 步骤条 渲染器 |
| steps | Array<[step](#step)> | [] | 数组,配置步骤信息 |
| source | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | 选项组源,可通过数据映射获取当前数据域变量、或者配置 API 对象 |
| name | `string` | | 关联上下文变量 |
| value | `string` \| `number` | `-` | 设置默认值,注意不支持表达式 |
| status | [StepStatus](#StepStatus) \| {[propName: string]: stepStatus;} | `-` | 状态 |
| className | `string` | `-` | 自定义类名 |
| mode | `horizontal` \| `vertical` | `horizontal` | 指定步骤条方向。目前支持水平horizontal和竖直vertical两种方向 |
| labelPlacement | `horizontal` \| `vertical` | `horizontal` | 指定标签放置位置,默认水平放图标右侧,可选 (vertical) 放图标下方 |
| progressDot | `boolean` | `false` | 点状步骤条 |
### step
| 属性名 | 类型 | 默认值 | 说明 |
| ----------- | ----------------------------------------------------- | ------ | --------------------------------------- |
| title | `string` \| [SchemaNode](../../docs/types/schemanode) | | 标题 |
| subTitle | `string` \| [SchemaNode](../../docs/types/schemanode) | | 子标题 |
| description | `string` \| [SchemaNode](../../docs/types/schemanode) | | 详细描述 |
| icon | `string` | | icon 名,支持 fontawesome v4 或使用 url |
| value | `string` | | value |
| className | `string` | | 自定义类名 |
### StepStatus
`wait` | `process` | `finish` | `error`