add Card component

add Card component

components/card/card.vue

@@ -0,0 +1,58 @@
+<template>
+    <div :class="classes">
+        <div :class="headClasses" v-if="showHead" v-el:head><slot name="title"></slot></div>
+        <div :class="extraClasses" v-if="showExtra" v-el:extra><slot name="extra"></slot></div>
+        <div :class="bodyClasses"><slot></slot></div>
+    </div>
+</template>
+<script>
+    const prefixCls = 'ivu-card';
+
+    export default {
+        props: {
+            bordered: {
+                type: Boolean,
+                default: true
+            },
+            disHover: {
+                type: Boolean,
+                default: false
+            },
+            shadow: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                showHead: true,
+                showExtra: true
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-bordered`]: this.bordered && !this.shadow,
+                        [`${prefixCls}-dis-hover`]: this.disHover || this.shadow,
+                        [`${prefixCls}-shadow`]: this.shadow
+                    }
+                ]
+            },
+            headClasses () {
+                return `${prefixCls}-head`;
+            },
+            extraClasses () {
+                return `${prefixCls}-extra`;
+            },
+            bodyClasses () {
+                return `${prefixCls}-body`;
+            }
+        },
+        compiled () {
+            this.showHead = this.$els.head.innerHTML != '';
+            this.showExtra = this.$els.extra.innerHTML != '';
+        }
+    }
+</script>

components/card/index.js

@@ -0,0 +1,2 @@
+import Card from './card.vue';
+export default Card;

index.js

@@ -19,6 +19,7 @@ import Steps from './components/steps';
 import Breadcrumb from './components/breadcrumb';
 import Alert from './components/alert';
 import Collapse from './components/collapse';
+import Card from './components/card';
 
 const iview = {
     Button,
@@ -42,7 +43,8 @@ const iview = {
     Steps,
     Breadcrumb,
     Alert,
-    Collapse
+    Collapse,
+    Card
 };
 
 module.exports = iview;

local/routers/layout.vue

@@ -1,20 +1,24 @@
 <template>
-    <Row>
+    <Card :bordered="true" style="width:300px">
-        <i-col span="4">
+        <template slot="title">
-            我在左边
+            <p>放寒假的发货会计师</p>
-        </i-col>
+        </template>
-        <i-col span="20">
+        <a href="#" slot="extra">More</a>
-            我在右边
+    </Card>
-        </i-col>
+    <Card style="width:300px">
-    </Row>
+        <p>hello</p>
+        <p>hndshf</p>
+        <h3>jfds</h3>
+    </Card>
 </template>
 <script>
-    import { Row, Col } from 'iview';
+    import { Row, Col, Card } from 'iview';
 
     export default {
         components: {
             Row,
-            iCol: Col
+            iCol: Col,
+            Card
         },
         props: {
         

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "title": "iView",
   "description": "An UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",

styles/components/card.less

@@ -0,0 +1,64 @@
+@card-prefix-cls: ~"@{css-prefix}card";
+
+.@{card-prefix-cls}{
+    background: #fff;
+    border-radius: @border-radius-small;
+    font-size: @font-size-base;
+    position: relative;
+    overflow: hidden;
+    transition: all @transition-time @ease-in-out;
+
+    &-bordered {
+        border: 1px solid @border-color-base;
+        border-color: @border-color-split;
+    }
+
+    &-shadow{
+        box-shadow: @shadow-card;
+    }
+
+    &:hover {
+        box-shadow: @shadow-base;
+        border-color: #eee;
+    }
+    &&-dis-hover:hover{
+        box-shadow: none;
+        border-color: transparent;
+    }
+
+    &&-dis-hover&-bordered:hover{
+        border-color: @border-color-split;
+    }
+
+    &&-shadow:hover{
+        box-shadow: @shadow-card;
+    }
+
+    &-head {
+        border-bottom: 1px solid @border-color-split;
+        padding: 10px 16px;
+        line-height: 1;
+
+        p {
+            display: inline-block;
+            width: 100%;
+            height: 20px;
+            line-height: 20px;
+            font-size: 14px;
+            font-weight: bold;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    &-extra {
+        position: absolute;
+        right: 16px;
+        top: 10px;
+    }
+
+    &-body {
+        padding: 16px;
+    }
+}

styles/components/index.less

@@ -5,4 +5,5 @@
 @import "circle";
 @import "spin";
 @import "alert";
-@import "collapse";
+@import "collapse";
+@import "card";

styles/themes/default/custom.less

@@ -13,12 +13,6 @@
 
 // Base
 @body-background        : #fff;
-
-// Border color
-@border-color-base      : #d9d9d9;  // base
-// Background color
-@background-color-base  : #f7f7f7;  // base
-
 @font-family            : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
 @code-family            : Consolas,Menlo,Courier,monospace;
 @text-color             : #525558;
@@ -26,6 +20,23 @@
 @line-height-base       : 1.5;
 @line-height-computed   : floor((@font-size-base * @line-height-base));
 @border-radius-base     : 6px;
+@border-radius-small    : 4px;
+
+// Border color
+@border-color-base      : #d9d9d9;  // outside
+@border-color-split     : #e9e9e9;  // inside
+
+// Background color
+@background-color-base  : #f7f7f7;  // base
+
+// Shadow
+@shadow-color           : rgba(100, 100, 100, .2);
+@shadow-base            : @shadow-down;
+@shadow-card            : 0 1px 1px 0 rgba(0,0,0,.1);
+@shadow-up              : 0 -1px 6px @shadow-color;
+@shadow-down            : 0 1px 6px @shadow-color;
+@shadow-left            : -1px 0 6px @shadow-color;
+@shadow-right           : 1px 0 6px @shadow-color;
 
 // Layout and Grid
 @grid-columns           : 24;