add Page UI

add Page UI

components/page/page.vue

@@ -4,9 +4,9 @@
             title="上一页"
             :class="prevClasses"
             @click="prev">
-            <a>←</a>
+            <a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
         </li>
-        <div :title="current + '/' + allPages">
+        <div :class="simplePagerClasses" :title="current + '/' + allPages">
             <input
                 type="text"
                 :value="current"
@@ -20,7 +20,7 @@
             title="下一页"
             :class="nextClasses"
             @click="next">
-            <a>→</a>
+            <a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a>
         </li>
     </ul>
     <ul :class="wrapClasses" v-else>
@@ -31,22 +31,22 @@
             title="上一页"
             :class="prevClasses"
             @click="prev">
-            <a>←</a>
+            <a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
         </li>
         <li title="第一页" :class="[`${prefixCls}-item`,{[`${prefixCls}-item-active`]: current == 1}]" @click="changePage(1)"><a>1</a></li>
-        <li title="向前 5 页" v-if="current - 3 > 1" :class="[`${prefixCls}-item-jump-prev`]" @click="fastPrev"><a>…</a></li>
+        <li title="向前 5 页" v-if="current - 3 > 1" :class="[`${prefixCls}-item-jump-prev`]" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a></li>
         <li :title="current - 2" v-if="current - 2 > 1" :class="[`${prefixCls}-item`]" @click="changePage(current - 2)"><a>{{ current - 2 }}</a></li>
         <li :title="current - 1" v-if="current - 1 > 1" :class="[`${prefixCls}-item`]" @click="changePage(current - 1)"><a>{{ current - 1 }}</a></li>
         <li :title="current" v-if="current != 1 && current != allPages" :class="[`${prefixCls}-item`,`${prefixCls}-item-active`]"><a>{{ current }}</a></li>
         <li :title="current + 1" v-if="current + 1 < allPages" :class="[`${prefixCls}-item`]" @click="changePage(current + 1)"><a>{{ current + 1 }}</a></li>
         <li :title="current + 2" v-if="current + 2 < allPages" :class="[`${prefixCls}-item`]" @click="changePage(current + 2)"><a>{{ current + 2 }}</a></li>
-        <li title="向后 5 页" v-if="current + 3 < allPages" :class="[`${prefixCls}-item-jump-next`]" @click="fastNext"><a>…</a></li>
+        <li title="向后 5 页" v-if="current + 3 < allPages" :class="[`${prefixCls}-item-jump-next`]" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a></li>
         <li :title="'最后一页:' + allPages" :class="[`${prefixCls}-item`, {[`${prefixCls}-item-active`]: current == allPages}]" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
         <li
             title="下一页"
             :class="nextClasses"
             @click="next">
-            <a>→</a>
+            <a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a>
         </li>
         <Options
             :show-sizer="showSizer"
@@ -125,6 +125,9 @@
                     `${prefixCls}-simple`
                 ]
             },
+            simplePagerClasses () {
+                return `${prefixCls}-simple-pager`;
+            },
             wrapClasses () {
                 return [
                     `${prefixCls}`,

local/routers/page.vue

@@ -2,9 +2,6 @@
     body{
         padding: 100px;
     }
-    .ivu-page-item-active{
-        color: #f60;
-    }
 </style>
 <template>
     <Page :current="1" :total="total" show-sizer show-total show-elevator :page-size="10" simple @on-change="setPage"></Page>

local/routers/tag.vue

@@ -6,21 +6,22 @@
         <Button @click="error">error</Button>
         <Button @click="update">update</Button>
         <br><br>
-        <Timeline>
+        <Page :total="100"></Page>
-            <Timeline-item>
+        <Page :total="100" show-sizer></Page>
-                <Icon type="close-circled" slot="dot"></Icon>
+        <Page :total="100" show-elevator></Page>
-                <p class="time">1976年</p>
+        <Page :total="100" show-total></Page>
-                <p class="content">Apple I 问世</p>
+        <br><br>
-            </Timeline-item>
+        <Page :current="2" :total="50" simple></Page>
-            <Timeline-item>
+        <br>
-                <p class="time">1984年</p>
+        <Page :total="400" size="small"></Page>
-                <p class="content">发布 Macintosh</p>
+        <br>
-            </Timeline-item>
+        <Page :total="400" size="small" show-elevator show-sizer></Page>
-        </Timeline>
+        <br>
+        <Page :total="400" size="small" show-total></Page>
     </div>
 </template>
 <script>
-    import { Tag, LoadingBar, Button, Progress, Icon, Timeline } from 'iview';
+    import { Tag, LoadingBar, Button, Progress, Icon, Timeline, Page } from 'iview';
     const ButtonGroup = Button.Group;
     const TimelineItem = Timeline.Item;
     export default {
@@ -31,7 +32,8 @@
             ButtonGroup,
             Timeline,
             TimelineItem,
-            Icon
+            Icon,
+            Page
         },
         props: {
         

package.json

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

styles/components/index.less

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

styles/components/page.less

@@ -0,0 +1,254 @@
+@page-prefix-cls: ~"@{css-prefix}page";
+
+.@{page-prefix-cls} {
+    &:after {
+        content: '';
+        display: block;
+        height: 0;
+        clear: both;
+        overflow: hidden;
+        visibility: hidden;
+    }
+
+    &-item {
+        float: left;
+        min-width: 28px;
+        height: 28px;
+        line-height: 28px;
+        margin-right: 4px;
+        text-align: center;
+        list-style: none;
+        background-color: #fff;
+        user-select: none;
+        cursor: pointer;
+        font-family: Arial;
+        border: 1px solid @border-color-base;
+        border-radius: @btn-border-radius;
+        .transition(all @transition-time @ease-in-out);
+
+        a {
+            margin: 0 6px;
+            text-decoration: none;
+            color: @text-color;
+            //.transition(none);
+        }
+
+        &:hover {
+            border-color: @primary-color;
+            a {
+                color: @primary-color;
+            }
+        }
+
+        &-active {
+            background-color: @primary-color;
+            border-color: @primary-color;
+
+            a, &:hover a {
+                color: #fff;
+            }
+        }
+    }
+
+    &-item-jump-prev, &-item-jump-next {
+        &:after {
+            content: "•••";
+            display: block;
+            letter-spacing: 2px;
+            color: #ccc;
+            text-align: center;
+        }
+
+        i{
+            display: none;
+        }
+
+        &:hover {
+            &:after{
+                display: none;
+            }
+            i{
+                display: inline;
+            }
+        }
+    }
+
+    &-item-jump-prev:hover {
+        i:after {
+            content: "\F3D2";
+        }
+    }
+
+    &-item-jump-next:hover {
+        i:after {
+            content: "\F3D3";
+        }
+    }
+
+    &-prev,
+    &-item-jump-prev,
+    &-item-jump-next {
+        margin-right: 8px;
+    }
+    &-prev,
+    &-next,
+    &-item-jump-prev,
+    &-item-jump-next {
+        display: inline-block;
+        float: left;
+        min-width: 28px;
+        height: 28px;
+        line-height: 28px;
+        list-style: none;
+        text-align: center;
+        cursor: pointer;
+        color: #666;
+        font-family: Arial;
+        border-radius: @btn-border-radius;
+        .transition(all @transition-time @ease-in-out);
+    }
+
+    &-prev,
+    &-next {
+        border: 1px solid @border-color-base;
+        background-color: #fff;
+
+        a {
+            color: #666;
+        }
+
+        &:hover {
+            border-color: @primary-color;
+
+            a {
+                color: @primary-color;
+            }
+        }
+    }
+
+    &-disabled {
+        cursor: @cursor-disabled;
+        a {
+            color: #ccc;
+        }
+        &:hover {
+            border-color: @border-color-base;
+            a {
+                color: #ccc;
+                cursor: @cursor-disabled;
+            }
+        }
+    }
+
+    &-options {
+        float: left;
+        margin-left: 15px;
+        &-sizer {
+            float: left;
+            margin-right: 10px;
+        }
+
+        &-elevator {
+            float: left;
+            height: 28px;
+            line-height: 28px;
+
+            input {
+                .input;
+                border-radius: @btn-border-radius;
+                margin: 0 8px;
+                width: 50px;
+            }
+        }
+    }
+
+    &-total {
+        float: left;
+        height: 30px;
+        line-height: 30px;
+        margin-right: 10px;
+    }
+
+    &-simple &-prev,
+    &-simple &-next {
+        margin: 0;
+        border: 0;
+        height: 24px;
+        line-height: 24px;
+        font-size: 18px;
+    }
+
+    &-simple &-simple-pager {
+        float: left;
+        margin-right: 8px;
+
+        input {
+            width: 30px;
+            height: 24px;
+            margin: 0 8px;
+            padding: 5px 8px;
+            text-align: center;
+            box-sizing: border-box;
+            background-color: #fff;
+            outline: none;
+            border: 1px solid @border-color-base;
+            border-radius: @btn-border-radius;
+            .transition(border-color @transition-time @ease-in-out);
+
+            &:hover {
+                border-color: @primary-color;
+            }
+        }
+    }
+}
+
+.@{page-prefix-cls} {
+    &.mini &-total {
+        height: 20px;
+        line-height: 20px;
+    }
+
+    &.mini &-item {
+        border: 0;
+        margin: 0;
+        min-width: 20px;
+        height: 20px;
+        line-height: 20px;
+        border-radius: @btn-border-radius-small;
+    }
+
+    &.mini &-prev,
+    &.mini &-next {
+        margin: 0;
+        min-width: 20px;
+        height: 20px;
+        line-height: 20px;
+        border: 0;
+
+        a {
+            i:after {
+                height: 20px;
+                line-height: 20px;
+            }
+        }
+    }
+
+    &.mini &-item-jump-prev,
+    &.mini &-item-jump-next {
+        height: 20px;
+        line-height: 20px;
+    }
+
+    &.mini &-options {
+        margin-left: 8px;
+        &-elevator {
+            height: 20px;
+            line-height: 20px;
+
+            input {
+                .input-small;
+                width: 44px;
+            }
+        }
+    }
+}