Timeline (时间轴)
时间轴多用于某项任务进度的展示,例如:物流、订单进度等
功能强大
代码示例
基本用法
最简单定义一个时间轴的用法
商家已接单,准备出库
宝贝已出库,准备递交给快递
宝贝已到达北京,准备派送
宝贝已被百米站代收
小点颜色
用各种颜色来标识不同状态,可以使用info、danger、royal、success等(其他取值参见Color组件)或自定义的颜色,默认是info。可以在Timeline组件上使用dot-color统一设置,也可以在TimelineItem组件上单个设置
商家已接单,准备出库
宝贝已出库,准备递交给快递
宝贝已到达北京,准备派送
收件人电话无法接通,宝贝已被百米站代收
小点类型
有实心圆和空心圆两种类型,默认为空心圆,通过dot-type设置,取值有fill(实心),outline(空心),默认为outline
商家已接单,准备出库
宝贝已出库,准备递交给快递
宝贝已到达北京,准备派送
收件人电话无法接通,宝贝已被百米站代收
小点尺寸
通过dot-size设置小点尺寸,可选值有small,default(或者不写),large。默认default
商家已接单,准备出库
宝贝已出库,准备递交给快递
宝贝已到达北京,准备派送
收件人电话无法接通,宝贝已被百米站代收
竖线颜色
竖线颜色的区分常用在表示进度时间轴的场景中,执行完的一种颜色,待办的一种颜色。line-color可选值和dot-color相同,默认为stable。竖线还有其他个性化配置,详见下方API。
商家已接单,准备出库
宝贝已出库,准备递交给快递
宝贝已到达北京,准备派送
收件人电话无法接通,宝贝已被百米站代收
时间位于左侧
time-position设置为left,时间将在左侧显示,仅当存在名为time的slot时,该属性才会有效。
商家已接单,准备出库
接单人:周先生
宝贝已出库,准备递交给快递
快递公司:顺丰
宝贝已到达北京,准备派送
收件人电话无法接通,宝贝已被百米站代收
百米站联系电话:13344236575