add Timeline UI

add Timeline UI

local/routers/tag.vue

@@ -6,34 +6,73 @@
         <Button @click="error">error</Button>
         <Button @click="update">update</Button>
         <br><br>
-        <Progress :percent="25"></Progress>
+        <Timeline>
-        <Progress :percent="45" status="success"></Progress>
+            <Timeline-item>
-        <Progress :percent="45" status="active"></Progress>
+                <p class="time">1976年</p>
-        <Progress :percent="65" status="wrong"></Progress>
+                <p class="content">Apple I 问世</p>
-        <Progress :percent="100"></Progress>
+            </Timeline-item>
-        <Progress :percent="25" hide-info></Progress>
+            <Timeline-item>
-        <Progress :percent="percent"></Progress>
+                <p class="time">1984年</p>
-        <Button-group size="large">
+                <p class="content">发布 Macintosh</p>
-            <Button icon="ios-plus-empty" @click="add"></Button>
+            </Timeline-item>
-            <Button icon="ios-minus-empty" @click="minus"></Button>
+            <Timeline-item>
-        </Button-group>
+                <p class="time">2007年</p>
-        <Progress :percent="25" :stroke-width="5"></Progress>
+                <p class="content">发布 iPhone</p>
-        <Progress :percent="100">
+            </Timeline-item>
-            <Icon type="checkmark-circled"></Icon>
+            <Timeline-item>
-            <span>成功</span>
+                <p class="time">2010年</p>
-        </Progress>
+                <p class="content">发布 iPad</p>
+            </Timeline-item>
+            <Timeline-item>
+                <p class="time">2011年10月5日</p>
+                <p class="content">史蒂夫·乔布斯去世</p>
+            </Timeline-item>
+        </Timeline>
+        <br><br><br>
+        <Timeline>
+            <Timeline-item color="green">发布1.0版本</Timeline-item>
+            <Timeline-item color="green">发布2.0版本</Timeline-item>
+            <Timeline-item color="red">严重故障</Timeline-item>
+            <Timeline-item color="blue">发布3.0版本</Timeline-item>
+        </Timeline>
+        <br><br><br>
+        <Timeline pending>
+            <Timeline-item>发布1.0版本</Timeline-item>
+            <Timeline-item>发布2.0版本</Timeline-item>
+            <Timeline-item>发布3.0版本</Timeline-item>
+            <Timeline-item><a href="#">查看更多</a></Timeline-item>
+        </Timeline>
+        <br><br><br>
+        <Timeline>
+            <Timeline-item color="green">
+                <Icon type="trophy" slot="dot"></Icon>
+                <span>发布里程碑版本</span>
+            </Timeline-item>
+            <Timeline-item>发布1.0版本</Timeline-item>
+            <Timeline-item>发布2.0版本</Timeline-item>
+            <Timeline-item>发布3.0版本</Timeline-item>
+        </Timeline>
+        <br><br><br>
+        <Timeline pending>
+            <Timeline-item>发布1.0版本</Timeline-item>
+            <Timeline-item>发布2.0版本</Timeline-item>
+        </Timeline>
+        <br><br><br>
     </div>
 </template>
 <script>
-    import { Tag, LoadingBar, Button, Progress, Icon } from 'iview';
+    import { Tag, LoadingBar, Button, Progress, Icon, Timeline } from 'iview';
     const ButtonGroup = Button.Group;
+    const TimelineItem = Timeline.Item;
     export default {
         components: {
             Tag,
             Button,
             Progress,
             ButtonGroup,
-            Icon
+            Icon,
+            Timeline,
+            TimelineItem
         },
         props: {
         

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",

styles/components/index.less

@@ -16,3 +16,4 @@
 @import "tag";
 @import "loading-bar";
 @import "progress";
+@import "timeline";

styles/components/timeline.less

@@ -0,0 +1,87 @@
+@timeline-prefix-cls: ~"@{css-prefix}timeline";
+@timeline-color: @border-color-split;
+
+.@{timeline-prefix-cls} {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &-item {
+        margin: 0;
+        padding: 0 0 12px 0;
+        list-style: none;
+        position: relative;
+
+        &-tail {
+            height: 100%;
+            border-left: 2px solid @timeline-color;
+            position: absolute;
+            left: 5px;
+            top: 0;
+        }
+
+        &-pending &-tail {
+            display: none;
+        }
+
+        &-head {
+            width: 12px;
+            height: 12px;
+            background-color: #fff;
+            border-radius: 100px;
+            border: 2px solid transparent;
+            position: absolute;
+
+            &-blue {
+                border-color: @primary-color;
+                color: @primary-color;
+            }
+            &-red {
+                border-color: @error-color;
+                color: @error-color;
+            }
+            &-green {
+                border-color: @success-color;
+                color: @success-color;
+            }
+        }
+
+        &-head-custom {
+            width: 40px;
+            height: auto;
+            margin-top: 6px;
+            padding: 3px 0;
+            text-align: center;
+            line-height: 1;
+            border: 0;
+            border-radius: 0;
+            font-size: 14px;
+            position: absolute;
+            left: -14px;
+            .transform(translateY(-50%));
+        }
+
+        &-content {
+            padding: 0 0 10px 24px;
+            font-size: @font-size-base;
+            position: relative;
+            top: -4px;
+        }
+
+        &:last-child {
+            .@{timeline-prefix-cls}-item-tail {
+                display: none;
+            }
+        }
+    }
+
+    &&-pending &-item:nth-last-of-type(2) {
+
+        .@{timeline-prefix-cls}-item-tail {
+            border-left: 2px dotted @timeline-color;
+        }
+        .@{timeline-prefix-cls}-item-content {
+            min-height: 48px;
+        }
+    }
+}