Timeline 时间线

可视化地呈现时间流信息。

基础用法

基础的时间线展示。

• 2018/4/12

  活动按期开始
• 2018/4/3

  通过审核
• 2018/4/2

  创建成功

<template>
  <ZcTimeline>
    <ZcTimelineItem timestamp="2018/4/12" placement="top"> 活动按期开始 </ZcTimelineItem>
    <ZcTimelineItem timestamp="2018/4/3" placement="top"> 通过审核 </ZcTimelineItem>
    <ZcTimelineItem timestamp="2018/4/2" placement="top"> 创建成功 </ZcTimelineItem>
  </ZcTimeline>
</template>

自定义节点颜色

通过 type 属性设置节点颜色。

• 2018/4/12

  主要节点
• 2018/4/3

  成功节点
• 2018/4/2

  警告节点
• 2018/4/1

  危险节点
• 2018/3/30

  信息节点

<template>
  <ZcTimeline>
    <ZcTimelineItem type="primary" timestamp="2018/4/12" placement="top"> 主要节点 </ZcTimelineItem>
    <ZcTimelineItem type="success" timestamp="2018/4/3" placement="top"> 成功节点 </ZcTimelineItem>
    <ZcTimelineItem type="warning" timestamp="2018/4/2" placement="top"> 警告节点 </ZcTimelineItem>
    <ZcTimelineItem type="danger" timestamp="2018/4/1" placement="top"> 危险节点 </ZcTimelineItem>
    <ZcTimelineItem type="info" timestamp="2018/3/30" placement="top"> 信息节点 </ZcTimelineItem>
  </ZcTimeline>
</template>

Timeline API

ZcTimeline Props

参数	说明	类型	默认值
reverse	是否反向排列	boolean	false

ZcTimeline Slots

插槽名	说明
default	放置 ZcTimelineItem 组件

ZcTimelineItem Props

参数	说明	类型	默认值
timestamp	时间戳	string	''
hideTimestamp	是否隐藏时间戳	boolean	false
type	节点类型	'primary' | 'success' | 'warning' | 'danger' | 'info'	'primary'
color	节点自定义颜色	string	''
size	节点尺寸	'normal' | 'large'	'normal'
placement	时间戳位置	'top' | 'bottom'	'top'
hollow	是否空心节点	boolean	false

ZcTimelineItem Slots

插槽名	说明
default	内容
dot	自定义节点