amis2/docs/zh-CN/components/timeline.md

---
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 类名（优先级高于统一配置的 timeClassName，（3.4.0 版本支持））   |
| titleClassName      | `string`                                                |           | 节点标题的 CSS 类名（优先级高于统一配置的 titleClassName，（3.4.0 版本支持））  |
| detailClassName     | `string`                                                |           | 节点详情的 CSS 类名（优先级高于统一配置的 detailClassName，（3.4.0 版本支持）） |