Timeline 时间线
v2.0.6+

时间线组件，纯 CSS 实现。可视化时间顺序，支持左/右/交错布局、节点颜色与图标。

基础用法

  • Preview
  • Code
2026-07-20 10:32
创建订单
用户提交了订单，等待支付
2026-07-20 10:45
支付完成
订单已支付，等待发货
2026-07-21 08:15
已发货
物流单号 SF1234567890
待更新
确认收货
等待用户确认
<div class="bny-timeline">
    <div class="bny-timeline-item is-primary">
        <div class="bny-timeline-node"></div>
        <div class="bny-timestamp">2026-07-20 10:32</div>
        <div class="bny-timeline-title">创建订单</div>
        <div class="bny-timeline-content">用户提交了订单</div>
    </div>
    <div class="bny-timeline-item is-success">...</div>
</div>

右侧布局

  • Preview
  • Code
2026-07-21 09:00
版本发布
v2.0.5 发布
2026-07-22 14:00
发现 Bug
影响部分用户，已定位
2026-07-23 11:00
修复并发布
v2.0.6 已修复
<div class="bny-timeline" mode="right">...</div>

交错布局

  • Preview
  • Code
2026-07-20
设计阶段
UI 设计稿完成
2026-07-21
开发阶段
前端 + 后端并行
2026-07-22
测试阶段
QA 验证中
2026-07-23
上线
正式发布
<div class="bny-timeline" mode="alternate">...</div>

主题色

  • Preview
  • Code
2026-07-23
全绿色节点
2026-07-23
统一主题色
<div class="bny-timeline" color="green">...</div>

API

CSS 类

类名/属性说明
bny-timeline时间线容器
mode="right"右侧布局
mode="alternate"交错布局
color="green/blue/yellow/red"主题色变体
bny-timeline-item时间线项
bny-timeline-node节点圆点
bny-timestamp时间戳
bny-timeline-title标题
bny-timeline-content内容
is-primary/success/warning/danger/info节点状态色
is-hollow空心节点