时间轴 Timeline

Timeline 组件用于垂直展示时间流信息,常用于项目里程碑、订单跟踪、版本历史等场景。

基础用法

Timeline 组件由两个部分组成:

  • Timeline: 容器组件
  • TimelineItem: 时间轴上的每一个节点
正在加载组件...
code

内容位置

通过设置 side 属性可以控制内容的显示位置,支持 right(默认)、left 和 both 三种模式。

内容在右边(默认)

正在加载组件...
code

内容在左边

正在加载组件...
code

内容交替左右

正在加载组件...
code

不同颜色的点

通过 dotColor 属性可以设置时间轴节点的颜色,支持 default、primary、main、success、warning 和 danger 六种颜色。

正在加载组件...
code

带内容描述

除了标题和日期,还可以通过 content 属性添加详细的内容描述。

正在加载组件...
code

使用场景

订单跟踪

Timeline 组件非常适合用于展示订单的物流跟踪信息。

正在加载组件...
code

版本历史

Timeline 组件也可用于展示产品的版本迭代历史。

正在加载组件...
code

API

Timeline

参数名描述类型默认值
side内容显示位置'left' | 'right' | 'both''right'
children子元素ReactNode-

TimelineItem

参数名描述类型默认值
title标题ReactNode-
content内容ReactNode-
date日期ReactNode-
dotColor点颜色'default' | 'primary' | 'main' | 'success' | 'warning' | 'danger''default'
children子元素(作为 content 使用)ReactNode-