Timeline 时间线

基本语法

<c-timeline>
  <c-timeline-item time="时间1">事件1的描述</c-timeline-item>
  <c-timeline-item time="时间2">事件2的描述</c-timeline-item>
  <c-timeline-item time="时间3">事件3的描述</c-timeline-item>
</c-timeline>

参数说明

使用示例

示例 1：版本更新记录

<c-timeline>
  <c-timeline-item time="2024-12-01">
    <strong>v1.0.0</strong> - 正式发布
    <ul>
      <li>三栏响应式布局</li>
      <li>深色模式支持</li>
    </ul>
  </c-timeline-item>
  <c-timeline-item time="2024-11-15">
    <strong>v0.9.0</strong> - 公测版本
    <ul>
      <li>修复已知问题</li>
      <li>优化性能</li>
    </ul>
  </c-timeline-item>
  <c-timeline-item time="2024-11-01">
    <strong>v0.1.0</strong> - 内测开始
  </c-timeline-item>
</c-timeline>

示例 2：项目进度

<c-timeline>
  <c-timeline-item time="第一阶段">需求分析与设计</c-timeline-item>
  <c-timeline-item time="第二阶段">功能开发与测试</c-timeline-item>
  <c-timeline-item time="第三阶段">部署上线与运维</c-timeline-item>
</c-timeline>

示例 3：个人经历

<c-timeline>
  <c-timeline-item time="2020年">开始学习前端开发</c-timeline-item>
  <c-timeline-item time="2021年">第一份开发工作</c-timeline-item>
  <c-timeline-item time="2022年">成为全栈工程师</c-timeline-item>
  <c-timeline-item time="2023年">创建个人博客</c-timeline-item>
</c-timeline>

使用效果