Add card component

components.json

@@ -148,5 +148,8 @@
   ],
   "message": [
     "./packages/message/index.js"
+  ],
+  "card": [
+    "./packages/card/index.js"
   ]
 }

examples/docs/card.md

@@ -0,0 +1,119 @@
+<script>
+  import fecha from 'packages/date-picker/src/util/fecha.js'
+  export default {
+    data() {
+      return {
+        currentDate: fecha.format(new Date(), 'yyyy-MM-dd HH:mm')
+      };
+    }
+  }
+</script>
+
+<style scoped>
+  .text {
+    font-size: 14px;
+  }
+
+  .time {
+    font-size: 13px;
+    color: #999;
+    display: block;
+    margin-top: 13px;
+  }
+
+  .item {
+    padding: 18px 0;
+  }
+
+  .button {
+    padding: 0;
+  }
+</style>
+
+## 基础用法
+包含标题, 内容和操作
+
+<el-row>
+  <el-col :span="12">
+    <el-card>
+      <div slot="header" style="display: flex; align-items: center;">
+        <div style="flex: 1; color: #20a0ff;">卡片名称</div>
+        <el-button type="primary">操作按钮</el-button>
+      </div>
+      <div v-for="o in 4" class="text item">
+        {{'列表内容 ' + o }}
+      </div>
+    </el-card>
+  </el-col>
+</el-row>
+
+```html
+<el-card>
+  <div slot="header" style="display: flex; align-items: center;">
+    <div style="flex: 1; color: #20a0ff;">卡片名称</div>
+    <el-button type="primary">操作按钮</el-button>
+  </div>
+  <div v-for="o in 4" class="text item">
+    {{'列表内容 ' + o }}
+  </div>
+</el-card>
+```
+
+## 简单卡片
+卡片可以只有内容区域
+
+<el-row>
+  <el-col :span="12">
+    <el-card>
+      <div v-for="o in 4" class="text item">
+        {{'列表内容 ' + o }}
+      </div>
+    </el-card>
+  </el-col>
+</el-row>
+
+```html
+<el-card>
+  <div v-for="o in 4" class="text item">
+    {{'列表内容 ' + o }}
+  </div>
+</el-card>
+```
+
+
+## 带图片
+可配置定义更丰富的内容展示
+
+<el-row>
+  <el-col :span="8" v-for="(o, index) in 2" :offset="index > 0 ? 2 : 0">
+    <el-card :body-style="{ padding: '0px' }">
+      <img src="~examples/assets/images/hamburger.png" width="100%" style="display: block;">
+      <div style="padding: 14px; display: flex; align-items: flex-end;">
+        <div style="flex: 1">
+          <span>好吃的汉堡</span>
+          <time class="time">{{ currentDate }}</time>
+        </div>
+        <el-button type="text" class="button">操作按钮</el-button>
+      </div>
+    </el-card>
+  </el-col>
+</el-row>
+
+```html
+<el-card :body-style="{ padding: '0px' }">
+  <img src="~examples/assets/images/hamburger.png" width="100%" style="display: block;">
+  <div style="padding: 14px; display: flex; align-items: flex-end;">
+    <div style="flex: 1">
+      <span>好吃的汉堡</span>
+      <time class="time">{{ currentDate }}</time>
+    </div>
+    <el-button type="text" class="button">操作按钮</el-button>
+  </div>
+</el-card>
+```
+
+## API
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| | |
+| body-style | 设置 body 的样式| object| | { padding: '20px' } |

examples/nav.config.json

@@ -92,6 +92,12 @@
         "name": "加载 (loading)",
         "title": "loading 加载",
         "description": "加载数据时显示"
+      },
+      {
+        "path": "/card",
+        "name": "卡片 (card)",
+        "title": "card 卡片",
+        "description": "将信息聚合在卡片容器中展示"
       }
     ]
   },

packages/card/cooking.conf.js

@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElCard',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();

packages/card/index.js

@@ -0,0 +1,7 @@
+const Card = require('./src/main');
+
+Card.install = function(Vue) {
+  Vue.component(Card.name, Card);
+};
+
+module.exports = Card;

packages/card/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "el-card",
+  "version": "0.0.0",
+  "description": "A card component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/card",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {}
+}

packages/card/src/main.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="el-card">
+    <div class="el-card__header" v-if="$slots.header">
+      <slot name="header">{{ header }}</slot>
+    </div>
+    <div class="el-card__body" :style="bodyStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'el-card',
+
+    props: ['header', 'bodyStyle']
+  };
+</script>

packages/theme-default/src/card.css

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b card {
+    border: 1px solid var(--card-border-color);
+    border-radius: var(--card-border-radius);
+    background-color: #fff;
+    overflow: hidden;
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12),
+                0px 0px 6px 0px rgba(0, 0, 0, .04);
+
+    @e header {
+      padding: calc(var(--card-padding) - 2) var(--card-padding);
+      border-bottom: 1px solid var(--card-border-color);
+      box-sizing: border-box;
+    }
+
+    @e body {
+      padding: var(--card-padding);
+    }
+  }
+}

packages/theme-default/src/common/var.css

@@ -353,4 +353,10 @@
     --dropdown-menu-box-shadow: 0 0 6px 0 rgba(0,0,0,.12), 0 2px 4px 0 rgba(0,0,0,.12);
     --dropdown-menuItem-hover-fill: #e5e9f2;
     --dropdown-menuItem-hover-color: #475669;
+
+    /*Card
+    --------------------------*/
+    --card-border-color: var(--disabled-border-base);
+    --card-border-radius: 4px;
+    --card-padding: 20px;
 }

packages/theme-default/src/index.css

@@ -32,3 +32,4 @@
 @import "./row.css";
 @import "./col.css";
 @import "./spinner.css";
+@import "./card.css";