Timeline 时间轴

使用场景

用来展示一组与时间顺序关联的事件。

示例

基本示例

• 2018-05-10 18:00:00
  下单

  订单已受理
• 2018-05-10 18:10:00
  打包

  订单已打包完成，等待骑手取货
• 2018-05-10 18:15:00
  配送

  骑手正在火速配送中
• 2018-05-10 18:25:00
  送件失败

  失败原因：地址错误
• 2018-05-10 18:30:00
  客户退单

  客户退单
• 2018-05-10 18:30:00
  完成

  订单完成

inline

() => { return ( <Timeline> <TimelineItem title="下单" label="2018-05-10 18:00:00" status="success"> 订单已受理 </TimelineItem> <TimelineItem title="打包" label="2018-05-10 18:10:00" status="success"> 订单已打包完成，等待骑手取货 </TimelineItem> <TimelineItem title="配送" label="2018-05-10 18:15:00" status="process"> 骑手正在火速配送中 </TimelineItem> <TimelineItem title="送件失败" label="2018-05-10 18:25:00" status="error"> 失败原因：地址错误 </TimelineItem> <TimelineItem title="客户退单" label="2018-05-10 18:30:00"> 客户退单 </TimelineItem> <TimelineItem title="完成" label="2018-05-10 18:30:00"> 订单完成 </TimelineItem> </Timeline> ); }

() => {
  return (
    <Timeline>
      <TimelineItem title="下单" label="2018-05-10 18:00:00" status="success">
        订单已受理
      </TimelineItem>
      <TimelineItem title="打包" label="2018-05-10 18:10:00" status="success">
        订单已打包完成，等待骑手取货
      </TimelineItem>
      <TimelineItem title="配送" label="2018-05-10 18:15:00" status="process">
        骑手正在火速配送中
      </TimelineItem>
      <TimelineItem title="送件失败" label="2018-05-10 18:25:00" status="error">
        失败原因：地址错误
      </TimelineItem>
      <TimelineItem title="客户退单" label="2018-05-10 18:30:00">
        客户退单
      </TimelineItem>
      <TimelineItem title="完成" label="2018-05-10 18:30:00">
        订单完成
      </TimelineItem>
    </Timeline>
  );
}

标签位置

• 下单

  2018-05-10 18:00:00

  订单已受理
• 打包

  2018-05-10 18:10:00

  订单已打包完成，等待骑手取货
• 配送

  2018-05-10 18:15:00

  骑手正在火速配送中
• 送件失败

  2018-05-10 18:25:00

  失败原因：地址错误
• 客户退单

  2018-05-10 18:30:00

  客户退单
• 完成

  2018-05-10 18:30:00

  订单完成

inline

() => { return ( <Timeline labelPosition="right"> <TimelineItem title="下单" label="2018-05-10 18:00:00" status="success"> 订单已受理 </TimelineItem> <TimelineItem title="打包" label="2018-05-10 18:10:00" status="success"> 订单已打包完成，等待骑手取货 </TimelineItem> <TimelineItem title="配送" label="2018-05-10 18:15:00" status="process"> 骑手正在火速配送中 </TimelineItem> <TimelineItem title="送件失败" label="2018-05-10 18:25:00" status="error"> 失败原因：地址错误 </TimelineItem> <TimelineItem title="客户退单" label="2018-05-10 18:30:00"> 客户退单 </TimelineItem> <TimelineItem title="完成" label="2018-05-10 18:30:00"> 订单完成 </TimelineItem> </Timeline> ); }

() => {
  return (
    <Timeline labelPosition="right">
      <TimelineItem title="下单" label="2018-05-10 18:00:00" status="success">
        订单已受理
      </TimelineItem>
      <TimelineItem title="打包" label="2018-05-10 18:10:00" status="success">
        订单已打包完成，等待骑手取货
      </TimelineItem>
      <TimelineItem title="配送" label="2018-05-10 18:15:00" status="process">
        骑手正在火速配送中
      </TimelineItem>
      <TimelineItem title="送件失败" label="2018-05-10 18:25:00" status="error">
        失败原因：地址错误
      </TimelineItem>
      <TimelineItem title="客户退单" label="2018-05-10 18:30:00">
        客户退单
      </TimelineItem>
      <TimelineItem title="完成" label="2018-05-10 18:30:00">
        订单完成
      </TimelineItem>
    </Timeline>
  );
}

水平模式

• 2018-05-10 18:00:00
  下单

  订单已受理
• 2018-05-10 18:10:00
  打包

  订单已打包完成，等待骑手取货
• 2018-05-10 18:15:00
  配送

  骑手正在火速配送中
• 2018-05-10 18:25:00
  送件失败

  失败原因：地址错误
• 2018-05-10 18:30:00
  客户退单

  客户退单
• 2018-05-10 18:30:00
  完成

  订单完成

inline

() => ( <Timeline direction="row"> <TimelineItem title="下单" label="2018-05-10 18:00:00" status="success"> 订单已受理 </TimelineItem> <TimelineItem title="打包" label="2018-05-10 18:10:00" status="success"> 订单已打包完成，等待骑手取货 </TimelineItem> <TimelineItem title="配送" label="2018-05-10 18:15:00" status="process"> 骑手正在火速配送中 </TimelineItem> <TimelineItem title="送件失败" label="2018-05-10 18:25:00" status="error"> 失败原因：地址错误 </TimelineItem> <TimelineItem title="客户退单" label="2018-05-10 18:30:00"> 客户退单 </TimelineItem> <TimelineItem title="完成" label="2018-05-10 18:30:00"> 订单完成 </TimelineItem> </Timeline> )

() => (
  <Timeline direction="row">
    <TimelineItem title="下单" label="2018-05-10 18:00:00" status="success">
      订单已受理
    </TimelineItem>
    <TimelineItem title="打包" label="2018-05-10 18:10:00" status="success">
      订单已打包完成，等待骑手取货
    </TimelineItem>
    <TimelineItem title="配送" label="2018-05-10 18:15:00" status="process">
      骑手正在火速配送中
    </TimelineItem>
    <TimelineItem title="送件失败" label="2018-05-10 18:25:00" status="error">
      失败原因：地址错误
    </TimelineItem>
    <TimelineItem title="客户退单" label="2018-05-10 18:30:00">
      客户退单
    </TimelineItem>
    <TimelineItem title="完成" label="2018-05-10 18:30:00">
      订单完成
    </TimelineItem>
  </Timeline>
)

API

Timeline

字段	描述
direction	"column" | "row" 排列方向
labelPosition	TimePostionType 标签位置

TimelineItem

字段	描述
status	TimelineStatusType 状态
title	ReactNode 标题
label	ReactNode 时间文本
labelPosition	TimePostionType 时间文本的位置
showDotLine	boolean