流程图 (bui-timeline)

可扩展流程图

流程图 (bui-timeline) - 图1   流程图 (bui-timeline) - 图2

用法

  1. <bui-timeline>
  2.     <bui-timeline-item first=true></bui-timeline-item>
  3.     <bui-timeline-item>
  4.         <text class="time">1984年</text>
  5.         <text class="content">发布 Macintosh</text>
  6.     </bui-timeline-item>
  7.     <bui-timeline-item>
  8.         <text class="time">2007年</text>
  9.         <text class="content">发布 iPhone</text>
  10.     </bui-timeline-item>
  11.     <bui-timeline-item>
  12.         <text class="time">2010年</text>
  13.         <text class="content">发布 iPad</text>
  14.     </bui-timeline-item>
  15.     <bui-timeline-item last=true>
  16.         <text class="time">2011年10月5日</text>
  17.         <text class="content">史蒂夫·乔布斯去世</text>
  18.     </bui-timeline-item>
  19. </bui-timeline>

Example:bui-timeline

属性

Prop Type Required Default Description
color string N blue 圆圈颜色，可选值为blue``red``green，或自定义色值
title string N 发布版本一 默认时间轴文本
last boolean Y false 指定最后一个节点
first boolean Y false 指定第一个节点

扩展

自定义时间轴点内容，参考如下：

  1. <bui-timeline title="">
  2.     <bui-icon name="trophy" slot="dot"></bui-icon>
  3.     <text class="time">1984年</text>
  4.     <text class="content">发布 Macintosh</text>
  5. </bui-header>