Timeline 时间线

可视化地呈现时间流信息。

基础用法

Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity,时间戳是其区分于其他控件的重要特征,使⽤时注意与 Steps 步骤条等区分。

正序:

倒序:

显示代码

定义节点样式

可根据实际场景自定义节点尺寸、颜色,或直接使用图标。

显示代码

定义时间戳

当内容在垂直方向上过高时,可将时间戳置于内容之上。

显示代码

参数

你可以通过修改$.fn.timeline.defaults来修改全局默认配置,也可以在初始化时传入指定配置$(el).timeline({xx: xx})。 参数默认为 Json ,若为数组,则会被当做data赋值。

参数 说明 类型 可选值 默认值
reverse 指定节点排序方向,默认为正序 boolean - false
data 时间线参数数组,具体配置见下方【data参数】 array - []

data参数

参数 说明 类型 可选值 默认值
timestamp 时间戳 string - -
hideTimestamp 是否隐藏时间戳 boolean - false
placement 时间戳位置 string top / bottom 'bottom'
type 节点类型 string primary / success / warning / danger / info -
color 节点颜色 string hsl / hsv / hex / rgb -
size 节点尺寸 string normal / large 'normal'
icon 节点图标 string - -