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 | - | - |