• timeline 時間軸
  • 屬性說明
  • 示例
    • 代碼示例

timeline 時間軸

解釋： 時間軸組件，可配置時間軸內(nèi)容，時間軸狀態(tài)以及自定義圖標。適用于信息展示，并可放置在頁面的任何位置。

創(chuàng)新互聯(lián)服務(wù)緊隨時代發(fā)展步伐，進行技術(shù)革新和技術(shù)進步，經(jīng)過十余年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計師、專業(yè)的網(wǎng)站實施團隊以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對網(wǎng)站進行網(wǎng)站設(shè)計制作、做網(wǎng)站、建設(shè)、維護、更新和改版，實現(xiàn)客戶網(wǎng)站對外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。

屬性說明

status

String

否

wait

時間軸狀態(tài)，類型包括：wait、finished、success、error，每個類型對應(yīng)不同的icon圖標以及時間軸展現(xiàn)樣式

title

String

否

時間軸標題

desc

String

否

時間軸副標題

descStyle

String

否

時間軸副標題樣式

icon

String

否

自定義 icon 名稱

iconColor

String

否

自定義 icon 顏色

timeline-class

String

否

提供時間軸的擴展樣式類，供開發(fā)者自定義組件樣式，可通過此 class 改變時間軸外層樣式

item-tail-class

String

否

提供時間軸的擴展樣式類，供開發(fā)者自定義組件樣式，可通過此 class 改變時間軸軸線樣式

content-title-class

String

否

提供時間軸的擴展樣式類，供開發(fā)者自定義組件樣式，可通過此 class 改變時間軸標題樣式

示例

跳轉(zhuǎn)編輯工具

在開發(fā)者工具中打開

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