时间线 Timeline

按时间顺序展示一系列事件。

基础用法

• 2024-01-01
  Project Started

  Initial commit and setup.
• 2024-02-15
  Beta Release

  Released first beta version.
• 2024-03-10
  Feedback Collection

  Gathering user feedback.

Example

水平方向

使用 direction="horizontal" 属性使时间线水平展示。

• Step 1
  Order Placed
• Step 2
  Processing
• Step 3
  Shipped
• Step 4
  Delivered

Example

自定义样式与变体

你可以使用 variant 和 color 属性来自定义圆点和连接线。你也可以使用自定义图标作为圆点。

• Done
  Completed Step

  This step is fully complete.
• In Progress
  Current Step

  Working on this right now.
• Pending
  Upcoming Step

  Waiting for previous steps.
• Failed
  Failed Step

  Something went wrong here.

Example

居中交替展示

使用 position="center" 属性使时间线内容在轴线两侧交替展示。

• 2023
  Company Founded

  Started with a small team of 3 people.
• 2024
  Series A Funding

  Secured $5M in Series A funding.
• 2025
  Global Expansion

  Opened offices in Europe and Asia.
• 2026
  IPO

  Successfully went public.

Example

API

BrTimeline

Props

属性名	类型	默认值	说明
direction	'vertical' | 'horizontal'	'vertical'	时间线的方向
position	'left' | 'right' | 'center'	'right'	内容相对轴线的位置
color	string	'default'	时间线所有圆点和连接线的默认颜色

BrTimelineItem

Props

属性名	类型	默认值	说明
last	boolean	false	设置为 true 表示这是最后一项，会隐藏其连接线

BrTimelineDot

Props

属性名	类型	默认值	说明
variant	'dot' | 'circle' | 'square' | 'icon'	'circle'	圆点的视觉风格变体
color	string	'default'	圆点的颜色

BrTimelineConnector

Props

属性名	类型	默认值	说明
variant	'solid' | 'dashed' | 'dotted' | 'none'	'solid'	连接线的样式（实线、虚线、点线或无）
color	string	-	连接线的自定义颜色

BrTimelineContent

时间线节点主要内容的容器组件。

BrTimelineTime

时间线节点的时间戳或标签的容器组件。