feat: update card

components/card/Card.jsx

@@ -7,13 +7,14 @@ import addEventListener from '../_util/Dom/addEventListener';
 import { getComponentFromProp, getSlotOptions, filterEmpty } from '../_util/props-util';
 import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
 import BaseMixin from '../_util/BaseMixin';
+import { ConfigConsumerProps } from '../config-provider';
 
 const { TabPane } = Tabs;
 export default {
   name: 'ACard',
   mixins: [BaseMixin],
   props: {
-    prefixCls: PropTypes.string.def('ant-card'),
+    prefixCls: PropTypes.string,
     title: PropTypes.any,
     extra: PropTypes.any,
     bordered: PropTypes.bool.def(true),
@@ -22,11 +23,15 @@ export default {
     loading: PropTypes.bool.def(false),
     hoverable: PropTypes.bool.def(false),
     type: PropTypes.string,
+    size: PropTypes.oneOf(['default', 'small']),
     actions: PropTypes.any,
     tabList: PropTypes.array,
     activeTabKey: PropTypes.string,
     defaultActiveTabKey: PropTypes.string,
   },
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   data() {
     this.updateWiderPaddingCalled = false;
     return {
@@ -91,11 +96,12 @@ export default {
   },
   render() {
     const {
-      prefixCls = 'ant-card',
+      prefixCls: customizePrefixCls,
       headStyle = {},
       bodyStyle = {},
       loading,
       bordered = true,
+      size = 'default',
       type,
       tabList,
       hoverable,
@@ -103,6 +109,9 @@ export default {
       defaultActiveTabKey,
     } = this.$props;
 
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('card', customizePrefixCls);
+
     const { $slots, $scopedSlots, $listeners } = this;
 
     const classString = {
@@ -114,6 +123,7 @@ export default {
       [`${prefixCls}-padding-transition`]: this.updateWiderPaddingCalled,
       [`${prefixCls}-contain-grid`]: this.isContainGrid($slots.default),
       [`${prefixCls}-contain-tabs`]: tabList && tabList.length,
+      [`${prefixCls}-${size}`]: size !== 'default',
       [`${prefixCls}-type-${type}`]: !!type,
     };
 
@@ -162,17 +172,6 @@ export default {
             <div class={`${prefixCls}-loading-block`} />
           </Col>
         </Row>
-        <Row gutter={8}>
-          <Col span={8}>
-            <div class={`${prefixCls}-loading-block`} />
-          </Col>
-          <Col span={6}>
-            <div class={`${prefixCls}-loading-block`} />
-          </Col>
-          <Col span={8}>
-            <div class={`${prefixCls}-loading-block`} />
-          </Col>
-        </Row>
       </div>
     );
 

components/card/Grid.jsx

@@ -1,4 +1,5 @@
 import PropTypes from '../_util/vue-types';
+import { ConfigConsumerProps } from '../config-provider';
 
 export default {
   name: 'ACardGrid',
@@ -6,8 +7,15 @@ export default {
   props: {
     prefixCls: PropTypes.string.def('ant-card'),
   },
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   render() {
-    const { prefixCls = 'ant-card' } = this.$props;
+    const { prefixCls: customizePrefixCls } = this.$props;
+
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('card', customizePrefixCls);
+
     const classString = {
       [`${prefixCls}-grid`]: true,
     };

components/card/Meta.jsx

@@ -1,5 +1,6 @@
 import PropTypes from '../_util/vue-types';
 import { getComponentFromProp } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
 
 export default {
   name: 'ACardMeta',
@@ -8,8 +9,15 @@ export default {
     title: PropTypes.any,
     description: PropTypes.any,
   },
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   render() {
-    const { prefixCls = 'ant-card' } = this.$props;
+    const { prefixCls: customizePrefixCls } = this.$props;
+
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('card', customizePrefixCls);
+
     const classString = {
       [`${prefixCls}-meta`]: true,
     };

components/card/demo/basic.md

@@ -1,20 +1,31 @@
 <cn>
 #### 典型卡片
 包含标题、内容、操作区域。
+可通过设置size为`default`或者`small`，控制尺寸
 </cn>
 
 <us>
 #### Basic card
 A basic card containing a title, content and an extra corner content.
+Supports two sizes: `default` and `small`.
 </us>
 
 ```html
 <template>
-  <a-card title="Card Title">
+  <div>
-    <a href="#" slot="extra">more</a>
+    <a-card title="Default size card" style="width: 300px">
-    <p>card content</p>
+      <a href="#" slot="extra">more</a>
-    <p>card content</p>
+      <p>card content</p>
-    <p>card content</p>
+      <p>card content</p>
-  </a-card>
+      <p>card content</p>
+    </a-card>
+    <br>
+    <a-card size="small" title="Small size card" style="width: 300px">
+      <a href="#" slot="extra">more</a>
+      <p>card content</p>
+      <p>card content</p>
+      <p>card content</p>
+    </a-card>
+  </div>
 </template>
 ```

components/card/index.en-US.md

@@ -15,6 +15,7 @@
 | hoverable | Lift up when hovering card | boolean | false |
 | loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false |
 | tabList | List of TabPane's head, Custom tabs can be created with the scopedSlots property | Array<{key: string, tab: any, scopedSlots: {tab: 'XXX'}}> | - |
+| size | Size of card | `default` \| `small` | `default` |
 | title | Card title | string\|slot | - |
 | type | Card style type, can be set to `inner` or not set | string | - |
 

components/card/index.zh-CN.md

@@ -16,6 +16,7 @@
 | hoverable | 鼠标移过时可浮起 | boolean | false |
 | loading   | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |
 | tabList   | 页签标题列表, 可以通过scopedSlots属性自定义tab | Array<{key: string, tab: any, scopedSlots: {tab: 'XXX'}}> | - |
+| size | card 的尺寸 | `default` \| `small` | `default` |
 | title     | 卡片标题 | string\|slot | - |
 | type      | 卡片类型，可设置为 `inner` 或 不设置 | string | - |