Add tabBarExtraContent prop to Card (#18433)

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

@@ -1002,6 +1002,16 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
           role="tablist"
           tabindex="0"
         >
+          <div
+            class="ant-tabs-extra-content"
+            style="float:right"
+          >
+            <a
+              href="#"
+            >
+              More
+            </a>
+          </div>
           <div
             class="ant-tabs-nav-container"
           >

components/card/demo/tabs.md

@@ -85,6 +85,7 @@ class TabsCard extends React.Component {
           style={{ width: '100%' }}
           tabList={tabListNoTitle}
           activeTabKey={this.state.noTitleKey}
+          tabBarExtraContent={<a href="#">More</a>}
           onTabChange={key => {
             this.onTabChange(key, 'noTitleKey');
           }}

components/card/index.en-US.md

@@ -32,6 +32,7 @@ A card can be used to display content related to a single subject. The content c
 | 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}> | - |  |
+| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - |  |
 | size | Size of card | `default` \| `small` | `default` | 3.12.0 |
 | title | Card title | string\|ReactNode | - |  |
 | type | Card style type, can be set to `inner` or not set | string | - |  |

components/card/index.tsx

@@ -51,6 +51,7 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
   cover?: React.ReactNode;
   actions?: React.ReactNode[];
   tabList?: CardTabListType[];
+  tabBarExtraContent?: React.ReactNode | null;
   onTabChange?: (key: string) => void;
   activeTabKey?: string;
   defaultActiveTabKey?: string;
@@ -119,6 +120,7 @@ export default class Card extends React.Component<CardProps, {}> {
       children,
       activeTabKey,
       defaultActiveTabKey,
+      tabBarExtraContent,
       ...others
     } = this.props;
 
@@ -186,6 +188,7 @@ export default class Card extends React.Component<CardProps, {}> {
       [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
         ? activeTabKey
         : defaultActiveTabKey,
+      tabBarExtraContent,
     };
 
     let head;

components/card/index.zh-CN.md

@@ -33,6 +33,7 @@ cols: 1
 | hoverable | 鼠标移过时可浮起 | boolean | false |  |
 | loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |  |
 | tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - |  |
+| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 |  |
 | size | card 的尺寸 | `default` \| `small` | `default` | 3.12.0 |
 | title | 卡片标题 | string\|ReactNode | - |  |
 | type | 卡片类型，可设置为 `inner` 或 不设置 | string | - |  |
@@ -40,17 +41,17 @@ cols: 1
 
 ### Card.Grid
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --------- | ---------------------- | ------ | ------- | ---- |
-| className | 网格容器类名           | string | -       |      |
-| style     | 定义网格容器类名的样式 | object | -       |      |
+| 参数      | 说明                   | 类型   | 默认值 | 版本 |
+| --------- | ---------------------- | ------ | ------ | ---- |
+| className | 网格容器类名           | string | -      |      |
+| style     | 定义网格容器类名的样式 | object | -      |      |
 
 ### Card.Meta
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| ----------- | ------------------ | --------- | ------- | ---- |
-| avatar      | 头像/图标          | ReactNode | -       |      |
-| className   | 容器类名           | string    | -       |      |
-| description | 描述内容           | ReactNode | -       |      |
-| style       | 定义容器类名的样式 | object    | -       |      |
-| title       | 标题内容           | ReactNode | -       |      |
+| 参数        | 说明               | 类型      | 默认值 | 版本 |
+| ----------- | ------------------ | --------- | ------ | ---- |
+| avatar      | 头像/图标          | ReactNode | -      |      |
+| className   | 容器类名           | string    | -      |      |
+| description | 描述内容           | ReactNode | -      |      |
+| style       | 定义容器类名的样式 | object    | -      |      |
+| title       | 标题内容           | ReactNode | -      |      |