Timeline时间轴

Timeline时间轴用于垂直展示时间流信息，适用于按时间排列一系列信息，支持正序和倒序排列，当需要一条时间轴进行视觉串联时也可使用。

代码演示

1. 基本用法：创建基本的时间轴，每个a-timeline-item代表一个时间节点信息。

• Create a services site 2015-09-01
• Solve initial network problems 2015-09-01
• Technical testing 2015-09-01
• Network problems being solved 2015-09-01

<template>
  <a-timeline>
    <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
    <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
    <a-timeline-item>Technical testing 2015-09-01</a-timeline-item>
    <a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>
  </a-timeline>
</template>

2. 圆圈颜色：可设置时间轴点的颜色，绿色表示已完成、成功状态，红色表示告警或错误状态，蓝色为正在进行或其他默认状态，也可使用自定义色值。同时可通过插槽自定义节点内容。

• Create a services site 2015-09-01
• Create a services site 2015-09-01
• Solve initial network problems 1

  Solve initial network problems 2

  Solve initial network problems 3 2015-09-01

• Technical testing 1

  Technical testing 2

  Technical testing 3 2015-09-01

• Technical testing 1

  Technical testing 2

  Technical testing 3 2015-09-01

• Technical testing 1

  Technical testing 2

  Technical testing 3 2015-09-01

• Custom color testing

<template>
  <a-timeline>
    <a-timeline-item color="green">Create a services site 2015-09-01</a-timeline-item>
    <a-timeline-item color="green">Create a services site 2015-09-01</a-timeline-item>
    <a-timeline-item color="red">
      <p>Solve initial network problems 1</p>
      <p>Solve initial network problems 2</p>
      <p>Solve initial network problems 3 2015-09-01</p>
    </a-timeline-item>
    <a-timeline-item>
      <p>Technical testing 1</p>
      <p>Technical testing 2</p>
      <p>Technical testing 3 2015-09-01</p>
    </a-timeline-item>
    <a-timeline-item color="gray">
      <p>Technical testing 1</p>
      <p>Technical testing 2</p>
      <p>Technical testing 3 2015-09-01</p>
    </a-timeline-item>
    <a-timeline-item color="gray">
      <p>Technical testing 1</p>
      <p>Technical testing 2</p>
      <p>Technical testing 3 2015-09-01</p>
    </a-timeline-item>
    <a-timeline-item color="#00CCFF">
      <template #dot>
        <SmileOutlined />
      </template>
      <p>Custom color testing</p>
    </a-timeline-item>
  </a-timeline>
</template>
<script lang="ts" setup>
import { SmileOutlined } from '@ant-design/icons-vue';
</script>

3. 右侧时间轴点：设置mode="right"，让时间轴点位于内容右边。

• Create a services site 2015-09-01
• Solve initial network problems 2015-09-01
• Technical testing 2015-09-01
• Network problems being solved 2015-09-01

<template>
  <a-timeline mode="right">
    <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
    <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
    <a-timeline-item>
      <template #dot><clock-circle-outlined style="font-size: 16px" /></template>
      Technical testing 2015-09-01
    </a-timeline-item>
    <a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>
  </a-timeline>
</template>
<script lang="ts" setup>
import { ClockCircleOutlined } from '@ant-design/icons-vue';
</script>

API

Timeline

参数	说明	类型	默认值
mode	改变时间轴和内容的相对位置	left | alternate | right	-
pending	指定最后一个幽灵节点是否存在或内容	boolean|string|slot	false
pendingDot	当最后一个幽灵节点存在时，指定其时间图点	string|slot	<LoadingOutlined />
reverse	节点排序	boolean	false

Timeline.Item

参数	说明	类型	默认值	版本
color	指定圆圈颜色，如blue、red、green或自定义色值	string	blue	-
dot	自定义时间轴点	string|slot	-	-
label	设置标签	string | slot	-	3.0
position	自定义节点位置	left | right	-	-