feat: add card tablist support custom tab

Author: tangjinzhou

components/card/Card.jsx

@@ -81,11 +81,11 @@ export default {
   },
   render () {
     const {
-      prefixCls = 'ant-card', extra, bodyStyle, title, loading,
+      prefixCls = 'ant-card', bodyStyle, loading,
       bordered = true, type, tabList, hoverable, activeTabKey, defaultActiveTabKey,
     } = this.$props
 
-    const { $slots } = this
+    const { $slots, $scopedSlots } = this
 
     const classString = {
       [`${prefixCls}`]: true,
@@ -139,11 +139,16 @@ export default {
     let head
     const tabs = tabList && tabList.length ? (
       <Tabs {...tabsProps}>
-        {tabList.map(item => <TabPane tab={item.tab} key={item.key} />)}
+        {tabList.map(item => {
+          const { tab: temp, scopedSlots = {}} = item
+          const name = scopedSlots.tab
+          const tab = temp !== undefined ? temp : ($scopedSlots[name] ? $scopedSlots[name](item) : null)
+          return <TabPane tab={tab} key={item.key} />
+        })}
       </Tabs>
     ) : null
-    const titleDom = title || getComponentFromProp(this, 'title')
-    const extraDom = extra || getComponentFromProp(this, 'extra')
+    const titleDom = getComponentFromProp(this, 'title')
+    const extraDom = getComponentFromProp(this, 'extra')
     if (titleDom || extraDom || tabs) {
       head = (
         <div class={`${prefixCls}-head`}>

components/card/__tests__/__snapshots__/demo.test.js.snap

@@ -212,7 +212,8 @@ exports[`renders ./components/card/demo/tabsCard.md correctly 1`] = `
               <div class="ant-tabs-nav-scroll">
                 <div class="ant-tabs-nav ant-tabs-nav-animated">
                   <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated" style="display: block; transform: translate3d(0px,0,0); -webkit-transform: translate3d(0px,0,0); width: 0px;"></div>
-                  <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab">tab1</div>
+                  <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab"><span><i class="anticon anticon-home"></i>tab1
+    </span></div>
                   <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">tab2</div>
                 </div>
               </div>

components/card/demo/tabsCard.md

@@ -17,6 +17,9 @@
       :tabList="tabList"
       @tabChange="key => onTabChange(key, 'key')"
     >
+      <span slot="customRender" slot-scope="item">
+        <a-icon type="home"/>{{item.key}}
+      </span>
       <a href="#" slot="extra">More</a>
       {{contentList[key]}}
     </a-card>
@@ -40,7 +43,8 @@ export default {
     return {
       tabList: [{
         key: 'tab1',
-        tab: 'tab1',
+        // tab: 'tab1',
+        scopedSlots: { tab: 'customRender'}
       }, {
         key: 'tab2',
         tab: 'tab2',

components/card/index.en-US.md

@@ -11,7 +11,7 @@
 | extra | Content to render in the top-right corner of the card | string\|slot | - |
 | 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. | Array<{key: string, tab: ReactNode}> | - |
+| tabList | List of TabPane's head, Custom tabs can be created with the scopedSlots property | Array<{key: string, tab: any, scopedSlots: {tab: 'XXX'}}> | - |
 | activeTabKey | Current TabPane's key | string | - |
 | defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set. | string | - |
 | title | Card title | string\|slot | - |

components/card/index.zh-CN.md

@@ -12,7 +12,7 @@
 | extra     | 卡片右上角的操作区域 | string\|slot | - |
 | hoverable | 鼠标移过时可浮起 | boolean | false |
 | loading   | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |
-| tabList   | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - |
+| tabList   | 页签标题列表, 可以通过scopedSlots属性自定义tab | Array<{key: string, tab: any, scopedSlots: {tab: 'XXX'}}> | - |
 | activeTabKey | 当前激活页签的 key | string | - |
 | defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签 |
 | title     | 卡片标题 | string\|slot | - |