amis/docs/zh-CN/components/timeline.md
2023-08-08 10:04:04 +08:00

478 lines
13 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: Timeline 时间轴
description:
type: 0
group: ⚙ 组件
menuName: Timeline
icon:
order: 73
---
时间轴组件
## 基本用法
```schema
{
"type": "page",
"body": [
{
"type": "timeline",
"items": [
{
"time": "2019-02-07",
"title": "节点数据",
"detail": "error",
},
{
"time": "2019-02-08",
"title": "节点数据",
"detail": "success",
},
{
"time": "2019-02-09",
"title": "节点数据",
"detail": "error",
}
]
}
]
}
```
## 时间轴节点颜色设置
```schema
{
"type": "page",
"body": [
{
"type": "timeline",
"items": [
{
"time": "2019-02-07",
"title": "节点数据",
"color": "#ffb200",
},
{
"time": "2019-02-08",
"title": "节点数据",
"color": "#4F86F4",
},
{
"time": "2019-02-09",
"title": "节点数据",
"color": "success",
},
{
"time": "2019-02-09",
"title": "节点数据",
"color": "warning",
}
]
}
]
}
```
## 时间轴节点图标设置
```schema
{
"type": "page",
"data": {
"image": "https://suda.cdn.bcebos.com/images%2F2021-01%2Fsearch.svg"
},
"body": [
{
"type": "timeline",
"items": [
{
"time": "2019-02-07",
"title": "节点数据error",
"detail": "error",
"icon": "fail"
},
{
"time": "2019-02-08",
"title": "节点数据success",
"detail": "success",
"icon": "success"
},
{
"time": "2019-02-09",
"title": "节点数据(自定义图片)",
"detail": "warning",
"icon": "${image}"
}
]
}
]
}
```
## 节点标题自定义
```schema
{
"type": "page",
"body": [
{
"type": "timeline",
"items": [
{
"time": "2019-02-07",
"title": [
{
"type": "text",
"value": "2019年02月7日"
},
{
"type": "button",
"label": "查看",
"actionType": "dialog",
"level": "link",
"dialog": {
"title": "查看详情",
"body": "这是详细内容。"
}
},
{
"type": "button",
"label": "删除",
"level": "link",
"actionType": "dialog",
"dialog": {
"title": "删除",
"body": "确认删除吗?"
}
}
]
},
{
"time": "2019-02-10",
"title": [
{
"type": "text",
"value": "2019年02月10日"
},
{
"type": "button",
"label": "查看",
"actionType": "dialog",
"level": "link",
"dialog": {
"title": "查看详情",
"body": "这是详细内容。"
}
},
{
"type": "button",
"label": "删除",
"level": "link",
"actionType": "dialog",
"dialog": {
"title": "删除",
"body": "确认删除吗?"
}
}
]
},
]
}
]
}
```
## 设置节点数据倒序
```schema
{
"type": "page",
"body": [
{
"type": "timeline",
direction: "vertical",
reverse: true,
"items": [
{
"time": "2019-02-07",
"title": "节点数据",
},
{
"time": "2019-02-08",
"title": "节点数据",
},
{
"time": "2019-02-09",
"title": "节点数据",
},
{
"time": "2019-02-10",
"title": "节点数据",
},
]
}
]
}
```
## 设置时间轴方向
```schema
{
"type": "page",
"body": [
{
"type": "timeline",
direction: "horizontal",
"items": [
{
"time": "2019-02-07",
"title": "节点数据",
},
{
"time": "2019-02-08",
"title": "节点数据",
},
{
"time": "2019-02-09",
"title": "节点数据",
},
{
"time": "2019-02-10",
"title": "节点数据",
},
]
}
]
}
```
## 设置文字相对时间轴方向(时间轴横向时不支持)
### 文字位于时间轴左侧
```schema
{
"type": "page",
"body": [
{
"type": "timeline",
"mode": "left",
"items": [
{
"time": "2019-02-07",
"title": "节点数据",
"detail": "error",
},
{
"time": "2019-02-08",
"title": "节点数据",
"detail": "success",
}
]
},
]
}
```
### 文字交替位于时间轴两侧
```schema
{
"type": "page",
"body": [
{
"type": "timeline",
"mode": "alternate",
"items": [
{
"time": "2019-02-07",
"title": "节点数据",
"detail": "error",
},
{
"time": "2019-02-08",
"title": "节点数据",
"detail": "success",
}
]
}
]
}
```
### 文字位于时间轴右侧
```schema
{
"type": "page",
"body": [
{
"type": "timeline",
"mode": "right",
"items": [
{
"time": "2019-02-07",
"title": "节点数据",
"detail": "error",
},
{
"time": "2019-02-08",
"title": "节点数据",
"detail": "success",
}
]
},
]
}
```
## 动态数据
### 远程数据
```schema
{
"type": "page",
"body": [
{
"type": "timeline",
"source": {
"method": "get",
"url": "/api/mock2/timeline/timelineItems"
}
}
]
}
```
"source": "/api/mock2/timeline/timelineItems",
远程拉取接口时,返回的数据结构除了需要满足 amis 接口要求的基本数据结构 以外,必须用"items"作为时间轴数据的 key 值,如下:
```json
{
"status": 0,
"msg": "",
"data": {
"items": [
{
"time": "2019-02-07",
"title": "数据开发",
"detail": "2019-02-07detail",
"color": "#ffb200",
"icon": "close"
},
{"time": "2019-02-08", "title": "管理中心", "detail": "2019-02-08detail"},
{
"time": "2019-02-09",
"title": "SQL语句",
"detail": "2019-02-09detail",
"color": "warning"
},
{
"time": "2019-02-10",
"title": "一键部署",
"detail": "2019-02-10detail",
"icon": "compress-alt"
},
{"time": "2019-02-10", "title": "一键部署", "detail": "2019-02-11detail"},
{
"time": "2019-02-10",
"title": "一键部署",
"detail": "2019-02-12detail",
"icon": "close"
},
{"time": "2019-02-10", "title": "一键部署", "detail": "2019-02-13detail"}
]
}
}
```
### 数据域变量配置
> 3.4.0 及以上版本
```schema
{
"type": "page",
"data": {
"items": [
{
"title": "First",
"time": "this is subTitle",
"detail": "this is description"
},
{
"title": "Second"
},
{
"title": "Last"
}
]
},
"body": [
{
"type": "timeline",
"source": "${items}"
}
]
}
```
```schema
{
"type": "page",
"data": {
"items":
{
"First": "this is subTitle",
"detail": "this is description",
"title": "Second"
}
}
,
"body": [
{
"type": "timeline",
"source": "${items}"
}
]
}
```
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| --------------- | --------------------------------------------------------------------------------- | ---------- | ----------------------------------------------------------- |
| type | `string` | | `"timeline"` 指定为 时间轴 渲染器 |
| items | Array<[timelineItem](#timeline.item)> | [] | 配置节点数据 |
| source | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | 数据源,可通过数据映射获取当前数据域变量、或者配置 API 对象 |
| mode | `left` \| `right` \| `alternate` | `right` | 指定文字相对于时间轴的位置,仅 direction=vertical 时支持 |
| direction | `vertical` \| `horizontal` | `vertical` | 时间轴方向 |
| reverse | `boolean` | `false` | 根据时间倒序显示 |
| iconClassName | `string` | | 统一配置的节点图标 CSS 类3.4.0 版本支持)名 |
| timeClassName | `string` | | 统一配置的节点时间 CSS 类3.4.0 版本支持)名 |
| titleClassName | `string` | | 统一配置的节点标题 CSS 类3.4.0 版本支持)名 |
| detailClassName | `string` | | 统一配置的节点详情 CSS 类3.4.0 版本支持)名 |
### timeline.item
| 属性名 | 类型 | 默认值 | 说明 |
| ------------------- | ------------------------------------------------------- | --------- | ------------------------------------------------------------------------------- |
| time | `string ` | | 节点时间 |
| title | `string` \| [SchemaNode](../../docs/types/schemanode) | | 节点标题 |
| detail | `string` | | 节点详细描述(折叠) |
| detailCollapsedText | `string` | `展开` | 详细内容折叠时按钮文案 |
| detailExpandedText | `string` | `折叠` | 详细内容展开时按钮文案 |
| color | `string \| level样式info、success、warning、danger` | `#DADBDD` | 时间轴节点颜色 |
| icon | `string` | | icon 名,支持 fontawesome v4 或使用 url优先级高于 color |
| iconClassName | `string` | | 节点图标的 CSS 类名(优先级高于统一配置的 iconClassName 3.4.0 版本支持)) |
| timeClassName | `string` | | 节点时间的 CSS 类名(优先级高于统一配置的 timeClassName3.4.0 版本支持)) |
| titleClassName | `string` | | 节点标题的 CSS 类名(优先级高于统一配置的 titleClassName3.4.0 版本支持)) |
| detailClassName | `string` | | 节点详情的 CSS 类名(优先级高于统一配置的 detailClassName3.4.0 版本支持)) |