Timeline 时间线

时间线组件，用于展示时间序列。

基础用法

<div id="demo-timeline"></div>

<script>
  const timeline = new SaTimeline('#demo-timeline', {
    items: [
      {
        timestamp: '2024-01-01',
        content: '事件1：项目启动'
      },
      {
        timestamp: '2024-02-01',
        content: '事件2：需求分析完成'
      },
      {
        timestamp: '2024-03-01',
        content: '事件3：开发完成'
      },
      {
        timestamp: '2024-04-01',
        content: '事件4：项目上线'
      }
    ]
  });
</script>

加载 SanoUI 组件中...

不同类型

通过 type 配置时间线项的类型。

<div id="demo-timeline-types"></div>

<script>
  const timeline = new SaTimeline('#demo-timeline-types', {
    items: [
      {
        timestamp: '2024-01-01',
        content: '成功事件',
        type: 'success'
      },
      {
        timestamp: '2024-02-01',
        content: '警告事件',
        type: 'warning'
      },
      {
        timestamp: '2024-03-01',
        content: '错误事件',
        type: 'danger'
      },
      {
        timestamp: '2024-04-01',
        content: '信息事件',
        type: 'info'
      }
    ]
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaTimelineOptions	{}

配置选项

参数	说明	类型	可选值	默认值
items	时间线项数组	Array<TimelineItem>	-	[]

TimelineItem 配置

参数	说明	类型	可选值	默认值
timestamp	时间戳	string	-	-
content	内容	string	-	-
type	类型	string	primary / success / warning / danger / info	primary

方法

方法名	说明	参数	返回值
setItems	设置时间线项	items: Array<TimelineItem>	void
destroy	销毁实例	-	void

示例代码

手动创建实例

const timeline = new SaTimeline('#my-timeline', {
  items: [
    {
      timestamp: '2024-01-01 10:00:00',
      content: '项目启动',
      type: 'success'
    },
    {
      timestamp: '2024-02-01 10:00:00',
      content: '需求分析',
      type: 'primary'
    },
    {
      timestamp: '2024-03-01 10:00:00',
      content: '开发完成',
      type: 'success'
    },
    {
      timestamp: '2024-04-01 10:00:00',
      content: '项目上线',
      type: 'success'
    }
  ]
});

// 更新时间线项
timeline.setItems([
  {
    timestamp: '2024-05-01 10:00:00',
    content: '新事件',
    type: 'info'
  }
]);

实际使用场景

场景 1：订单状态时间线

展示订单处理流程的时间线。

<div id="order-timeline"></div>

<script>
  const timeline = new SaTimeline('#order-timeline', {
    items: [
      {
        timestamp: '2024-01-01 10:00:00',
        content: '订单已创建',
        type: 'success'
      },
      {
        timestamp: '2024-01-01 10:30:00',
        content: '订单已支付',
        type: 'success'
      },
      {
        timestamp: '2024-01-01 11:00:00',
        content: '订单已发货',
        type: 'primary'
      },
      {
        timestamp: '2024-01-02 14:00:00',
        content: '订单配送中',
        type: 'info'
      },
      {
        timestamp: '2024-01-03 16:00:00',
        content: '订单已完成',
        type: 'success'
      }
    ]
  });
</script>

加载 SanoUI 组件中...

场景 2：项目进度时间线

展示项目各个阶段的时间线。

<div id="project-timeline"></div>

<script>
  const timeline = new SaTimeline('#project-timeline', {
    items: [
      {
        timestamp: '2024-01-01',
        content: '项目启动',
        type: 'success'
      },
      {
        timestamp: '2024-02-01',
        content: '需求分析完成',
        type: 'primary'
      },
      {
        timestamp: '2024-03-01',
        content: '开发阶段',
        type: 'info'
      },
      {
        timestamp: '2024-04-01',
        content: '测试阶段',
        type: 'warning'
      },
      {
        timestamp: '2024-05-01',
        content: '项目上线',
        type: 'success'
      }
    ]
  });
</script>

加载 SanoUI 组件中...