Timeline 时间轴

时间轴。

代码演示

基本用法
基本用法。

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

右侧时间轴点 时间轴点可以在内容的右边。

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

交替展现 内容在时间轴两侧轮流出现。

<template>
  <f-timeline mode="alternate">
    <f-timeline-item>Create a services site 2015-09-01</f-timeline-item>
    <f-timeline-item color="green">Solve initial network problems 2015-09-01</f-timeline-item>
    <f-timeline-item>
      <template #dot><ClockCircleOutlined style="font-size: 16px" /></template>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
      aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </f-timeline-item>
    <f-timeline-item color="red">Network problems being solved 2015-09-01</f-timeline-item>
    <f-timeline-item>Create a services site 2015-09-01</f-timeline-item>
    <f-timeline-item>
      <template #dot><ClockCircleOutlined style="font-size: 16px" /></template>
      Technical testing 2015-09-01
    </f-timeline-item>
  </f-timeline>
</template>
<script lang="ts">
import { ClockCircleOutlined } from '@ant-design/icons-vue'
import { defineComponent } from 'vue'
export default defineComponent({
  components: {
    ClockCircleOutlined,
  },
})
</script>

label 在节点旁边添加标签

<template>
  <f-timeline mode="left">
    <f-timeline-item v-for="item in 5" :key="item">
      <template #label>
        <div style="color: #999">2020-04-09</div>
      </template>
      <div>进程{{ item }}</div>
      <div style="color: #999">2020-04-09</div>
    </f-timeline-item>
  </f-timeline>
</template>

API

Timeline props

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

Timeline.Item props

时间轴的每一个节点。

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