feat: add prop tab-size for card (#3762)

* feat: add param tab-size for card * feat: add param tab-size for card
vueComponent · Mar 9, 2021 · dced59c · dced59c
1 parent 48181af
commit dced59c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/components/card/Card.jsx b/components/card/Card.jsx
@@ -29,6 +29,7 @@ export default {
     size: PropTypes.oneOf(['default', 'small']),
     actions: PropTypes.any,
     tabList: PropTypes.array,
+    tabProps: PropTypes.object,
     tabBarExtraContent: PropTypes.any,
     activeTabKey: PropTypes.string,
     defaultActiveTabKey: PropTypes.string,
@@ -73,6 +74,7 @@ export default {
       size = 'default',
       type,
       tabList,
+      tabProps = {},
       hoverable,
       activeTabKey,
       defaultActiveTabKey,
@@ -145,7 +147,7 @@ export default {
     const hasActiveTabKey = activeTabKey !== undefined;
     const tabsProps = {
       props: {
-        size: 'large',
+        ...tabProps,
         [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
           ? activeTabKey
           : defaultActiveTabKey,

diff --git a/examples/App.vue b/examples/App.vue
@@ -1,16 +1,37 @@
 <template>
   <div>
-    <a-collapse :accordion="true" default-active-key="2" :bordered="false">
-      <a-collapse-panel key="1" header="This is panel header 1">
-        <p>{{ text }}</p>
-      </a-collapse-panel>
-      <a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
-        <p>{{ text }}</p>
-      </a-collapse-panel>
-      <a-collapse-panel key="3" header="This is panel header 3">
-        <p>{{ text }}</p>
-      </a-collapse-panel>
-    </a-collapse>
+    <a-card
+      title="测试"
+      :tab-props="{ size: 'small' }"
+      :tab-list="[
+        { key: 'tab1', tab: 'tab1' },
+        { key: 'tab2', tab: 'tab2' },
+      ]"
+    />
+    <a-card
+      title="测试"
+      :tab-props="{ size: 'large' }"
+      :tab-list="[
+        { key: 'tab1', tab: 'tab1' },
+        { key: 'tab2', tab: 'tab2' },
+      ]"
+    />
+    <a-card
+      title="测试"
+      :tab-props="{}"
+      :tab-list="[
+        { key: 'tab1', tab: 'tab1' },
+        { key: 'tab2', tab: 'tab2' },
+      ]"
+    />
+    <a-card
+      title="测试"
+      :tab-props="{ size: 'default' }"
+      :tab-list="[
+        { key: 'tab1', tab: 'tab1' },
+        { key: 'tab2', tab: 'tab2' },
+      ]"
+    />
   </div>
 </template>
 <script>