mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-09 15:43:32 +08:00
13846fb4e2
Co-authored-by: yanglu19 <yanglu19@baidu.com> Co-authored-by: liaoxuezhi <liaoxuezhi@baidu.com>
9.6 KiB
9.6 KiB
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Timeline 时间轴 | 0 | ⚙ 组件 | Timeline | 73 |
时间轴组件
基本用法
{
"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",
}
]
}
]
}
时间轴节点颜色设置
{
"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",
}
]
}
]
}
时间轴节点图标设置
{
"type": "page",
"body": [
{
"type": "timeline",
"items": [
{
"time": "2019-02-07",
"title": "节点数据error",
"detail": "error",
"icon": "status-fail"
},
{
"time": "2019-02-08",
"title": "节点数据success",
"detail": "success",
"icon": "status-success"
},
{
"time": "2019-02-09",
"title": "节点数据warning",
"detail": "warning",
"icon": "status-warning"
}
]
}
]
}
节点标题自定义
{
"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": "确认删除吗?"
}
}
]
},
]
}
]
}
设置节点数据倒序
{
"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": "节点数据",
},
]
}
]
}
设置时间轴方向
{
"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": "节点数据",
},
]
}
]
}
设置文字相对时间轴方向(时间轴横向时不支持)
文字位于时间轴左侧
{
"type": "page",
"body": [
{
"type": "timeline",
"mode": "left",
"items": [
{
"time": "2019-02-07",
"title": "节点数据",
"detail": "error",
},
{
"time": "2019-02-08",
"title": "节点数据",
"detail": "success",
}
]
},
]
}
文字交替位于时间轴两侧
{
"type": "page",
"body": [
{
"type": "timeline",
"mode": "alternate",
"items": [
{
"time": "2019-02-07",
"title": "节点数据",
"detail": "error",
},
{
"time": "2019-02-08",
"title": "节点数据",
"detail": "success",
}
]
}
]
}
文字位于时间轴右侧
{
"type": "page",
"body": [
{
"type": "timeline",
"mode": "right",
"items": [
{
"time": "2019-02-07",
"title": "节点数据",
"detail": "error",
},
{
"time": "2019-02-08",
"title": "节点数据",
"detail": "success",
}
]
},
]
}
远程数据
{
"type": "page",
"body": [
{
"type": "timeline",
"source": {
"method": "get",
"url": "/api/mock2/timeline/timelineItems"
}
}
]
}
"source": "/api/mock2/timeline/timelineItems",
远程拉取接口时,返回的数据结构除了需要满足 amis 接口要求的基本数据结构 以外,必须用"items"作为时间轴数据的 key 值,如下:
{
"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"}
]
}
}
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string |
"timeline" 指定为 时间轴 渲染器 |
|
items | Array<timelineItem> | [] | 配置节点数据 |
source | API | 数据源,可通过数据映射获取当前数据域变量、或者配置 API 对象 | |
mode | left | right | alternate |
right |
指定文字相对于时间轴的位置,仅 direction=vertical时支持 |
direction | vertical | horizontal |
vertical |
时间轴方向 |
reverse | boolean |
false |
根据时间倒序显示 |
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) |