• timeline 时间轴
  • 属性说明
  • 示例
    • 代码示例

timeline 时间轴

解释： 时间轴组件，可配置时间轴内容，时间轴状态以及自定义图标。适用于信息展示，并可放置在页面的任何位置。

创新互联服务紧随时代发展步伐，进行技术革新和技术进步，经过十余年的发展和积累，已经汇集了一批资深网站策划师、设计师、专业的网站实施团队以及高素质售后服务人员，并且完全形成了一套成熟的业务流程，能够完全依照客户要求对网站进行网站设计制作、做网站、建设、维护、更新和改版，实现客户网站对外宣传展示的首要目的，并为客户企业品牌互联网化提供全面的解决方案。

属性说明

status

String

否

wait

时间轴状态，类型包括：wait、finished、success、error，每个类型对应不同的icon图标以及时间轴展现样式

title

String

否

时间轴标题

desc

String

否

时间轴副标题

descStyle

String

否

时间轴副标题样式

icon

String

否

自定义 icon 名称

iconColor

String

否

自定义 icon 颜色

timeline-class

String

否

提供时间轴的扩展样式类，供开发者自定义组件样式，可通过此 class 改变时间轴外层样式

item-tail-class

String

否

提供时间轴的扩展样式类，供开发者自定义组件样式，可通过此 class 改变时间轴轴线样式

content-title-class

String

否

提供时间轴的扩展样式类，供开发者自定义组件样式，可通过此 class 改变时间轴标题样式

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

• SWAN
• JS
• CSS
• JSON

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 单条信息样式
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 s-for="item, index in options"
  
  
  
 status="{{item.status}}"
  
  
  
 title="{{item.title}}"
  
  
  
 desc="{{item.desc}}"
  
  
  
 has-tail="{{item.hasTail}}"
  
  
  
 icon-color="{{item.iconColor}}"
  
  
  
 timeline-class="comp-timeline"
  
  
  
 desc-style="
  
  
  
 {{index === options.length - 1 ? 'font-weight: 700;' : ''}}
  
  
  
 {{item.status === 'error' ? 'color: #f7534f' : ''}}
  
  
  
 "
  
  
  
 >
  
  
  
 {{item.info}}
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 多条信息样式
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 s-for="item, index in options2"
  
  
  
 status="{{item.status}}"
  
  
  
 desc="{{item.desc}}"
  
  
  
 has-tail="{{item.hasTail}}"
  
  
  
 icon-color="{{item.iconColor}}"
  
  
  
 timeline-class="comp-timeline"
  
  
  
 desc-style="{{
  
  
  
 index === options.length - 1
  
  
  
 ? 'font-weight: 700;'
  
  
  
 : ''
  
  
  
 }}"
  
  
  
 >
  
  
  
 
  
  
  
 class="comp-info-wrap"
  
  
  
 s-for="descInfo in item.descInfo"
  
  
  
 >
  
  
  
 
  
  
  
 {{descInfo.info}}
  
  
  
 
  
  
  
 
  
  
  
 {{descInfo.title}}