Timeline
基础反馈基于 Bootstrap 5 的时间轴组件，用于按时间顺序展示事件与动态，支持左/右/交替三种布局、语义色节点、自定义节点、时间戳与任意条目内容，交替布局在窄屏下自动回退为靠左
Component Demo
Basic usage and examples of the Timeline component
基础用法
- 09:30创建订单提交订单，等待支付
- 09:42支付成功支付成功，订单进入备货
- 10:15仓库发货商品已出库，交由快递揽收
- 次日 14:20确认收货订单已签收，交易完成
默认 align 为 left，连接线与节点靠左，time 渲染在标题之前；最后一条不会继续向下绘制连接线
右侧布局
- 09:30创建订单提交订单，等待支付
- 09:42支付成功支付成功，订单进入备货
- 10:15仓库发货商品已出库，交由快递揽收
- 次日 14:20确认收货订单已签收，交易完成
align 设为 right 时节点与连接线整体靠右，内容从右侧向左侧排列
交替布局
- 09:30创建订单提交订单，等待支付
- 09:42支付成功支付成功，订单进入备货
- 10:15仓库发货商品已出库，交由快递揽收
- 次日 14:20确认收货订单已签收，交易完成
align 设为 alternate 时条目沿中轴线左右交替，time 渲染在内容另一侧；窄屏下自动回退为靠左布局
节点颜色
- 构建成功所有用例均已通过
- 提交审核等待人工审核
- 信息不完整缺少负责人信息，请补充
- 发布失败部署失败，已自动回滚
- 默认节点颜色继承 Timeline 上设置的节点颜色
- 默认节点颜色同样继承 Timeline 上设置的节点颜色
color 支持 Bootstrap 全部语义色；条目上的 color 优先级高于 Timeline，未设置的条目继承 Timeline 的 color
自定义节点
- 📝提交报名填写并提交报名表
- 💰缴纳费用审核通过，缴纳参赛费用
- 🏁赛前签到现场签到，领取参赛包
- 🏅完赛领奖完成比赛，领取完赛奖牌
通过 dot 传入任意内容即可替换默认圆点，自定义节点始终居中于连接线
自定义内容
- 10:00发布公告创建发布计划v1.2.0 版本发布说明
新增 Timeline 时间轴组件，支持三种布局与自定义节点。
- 14:00全量测试完成回归测试
- 16:30灰度发布同步至所有生产节点
children 渲染在描述之后，可放入卡片、按钮等任意内容；连接线会随条目高度自动延伸
API Documentation
Complete API reference for the Timeline component
Props
Timeline
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
align | TimelineAlign | 'left' | 时间轴布局方向，`left` 节点靠左、`right` 节点靠右、`alternate` 节点左右交替；交替布局在窄屏下自动回退为靠左 |
as | ElementType | 'ol' | 根列表渲染的元素类型 |
children | ReactNode | - | 时间轴内容，仅识别 `TimelineItem`，其余子项会被忽略 |
className | string | - | 自定义类名，作用于根列表 |
color | TimelineColor | 'primary' | 默认节点颜色，可被单个条目的 `color` 覆盖 |
...rest | HTMLAttributes | - | 根列表的所有原生属性（如 `style`、`aria-label` 等） |
TimelineItem
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
as | ElementType | 'li' | 列表项渲染的元素类型 |
children | ReactNode | - | 条目额外内容，渲染在描述之后 |
className | string | - | 自定义类名，作用于列表项 |
color | TimelineColor | - | 节点颜色，覆盖 `Timeline` 上的 `color` |
description | ReactNode | - | 条目描述内容 |
dot | ReactNode | - | 自定义节点内容，替代默认圆点 |
index | number | - | 条目序号，由 `Timeline` 自动注入，用于交替布局的左右分配 |
time | ReactNode | - | 时间戳，渲染在标题之前；`alternate` 布局下渲染在内容另一侧 |
title | ReactNode | - | 条目标题内容 |
...rest | HTMLAttributes | - | 列表项的所有原生属性（如 `style`、`onClick` 等） |
Type Definitions
TimelineAlign
时间轴布局方向类型
export type TimelineAlign = 'alternate' | 'left' | 'right';TimelineColor
节点颜色类型，对应 Bootstrap 语义色
export type TimelineColor =
'danger' | 'dark' | 'info' | 'light' | 'primary' | 'secondary' | 'success' | 'warning';TimelineContextValue
时间轴上下文值，可通过 `useTimeline` 获取（不在 `Timeline` 内返回 `null`）
export interface TimelineContextValue {
align: TimelineAlign;
color: TimelineColor;
}TimelineItemProps
时间轴条目组件属性接口
export interface TimelineItemProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
as?: ElementType;
children?: ReactNode;
className?: string;
color?: TimelineColor;
description?: ReactNode;
dot?: ReactNode;
index?: number;
time?: ReactNode;
title?: ReactNode;
}TimelineProps
时间轴组件属性接口
export interface TimelineProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
align?: TimelineAlign;
as?: ElementType;
children?: ReactNode;
className?: string;
color?: TimelineColor;
}