总览

Timeline 时间轴

以时间为主逻辑展示连续性信息。

Timeline 时间轴

Guide

何时使用

  • 当有一系列信息需要从上至下按时间排列时。

  • 需要有一条时间轴进行视觉上的串联时。

  • Sign
    2016-06-10 10:30:00
    [Hangzhou] has received the sign, the signer is Alibaba Post Office, thank you for using STO, looking forward to serving you again

  • Delivery
    2016-06-10 09:30:00
    [Hangzhou]Express has reached Hangzhou Hangzhou Binjiang Company

  • Delivery
    2016-06-10 09:03:00
    [Hangzhou] Zhejiang Hangzhou Binjiang Company dispatches members for you

基本

最简单的用法。

  • Cloudy
    2016-06-10 10:30:00

  • Sunny
    2016-06-11

  • Rainy
    2016-06-09

状态

设置每个节点不同的状态。

  • Receipt
    2017-10-21

  • Ship
    2017-10-22

  • Order
    2017-10-23
    Congratulations, successful orders!

自定义时间轴节点

自定义时间轴节点。

  • Sign
    2016-06-10 10:30:00
    [Hangzhou] has received the sign, the signer is Alibaba Post Office, thank you for using STO, looking forward to serving you again

  • Transport
    2016-06-10 06:10:00
    [Hangzhou] Zhejiang Hangzhou Transshipment Center has been issued

  • Transport
    2016-06-09 18:00:00
    [Dongguan City] Guangdong Dongguan Transshipment Center has been issued

折叠

自定义折叠区域。

API

Timeline

参数说明类型默认值
fold自定义折叠选项 示例[{foldArea: [startIndex, endIndex], foldShow: boolean}]Array[]

Timeline.Item

参数说明类型默认值
state节点状态

可选值:
'done', 'process', 'error', 'success'		Enum'done'
dot自定义时间轴节点ReactNode-
time格式化后的时间ReactNode-
title标题ReactNode-
content右侧内容ReactNode-