From 5e10d5ae7d3406a172c97acdbd57fe27187a10b0 Mon Sep 17 00:00:00 2001 From: Artin Date: Fri, 23 Aug 2019 14:14:41 +0800 Subject: [PATCH] Add tabBarExtraContent prop to Card (#18433) --- .../__tests__/__snapshots__/demo.test.js.snap | 10 ++++++++ components/card/demo/tabs.md | 1 + components/card/index.en-US.md | 1 + components/card/index.tsx | 3 +++ components/card/index.zh-CN.md | 23 ++++++++++--------- 5 files changed, 27 insertions(+), 11 deletions(-) diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap index a9b4aab4a4..734b055efb 100644 --- a/components/card/__tests__/__snapshots__/demo.test.js.snap +++ b/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" > +
+ + More + +
diff --git a/components/card/demo/tabs.md b/components/card/demo/tabs.md index d35f025e2c..1fb4a5dd3f 100644 --- a/components/card/demo/tabs.md +++ b/components/card/demo/tabs.md @@ -85,6 +85,7 @@ class TabsCard extends React.Component { style={{ width: '100%' }} tabList={tabListNoTitle} activeTabKey={this.state.noTitleKey} + tabBarExtraContent={More} onTabChange={key => { this.onTabChange(key, 'noTitleKey'); }} diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md index 85f69a50d1..732c2f3c95 100644 --- a/components/card/index.en-US.md +++ b/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 | - | | diff --git a/components/card/index.tsx b/components/card/index.tsx index 9e03ef75c7..38718f839d 100644 --- a/components/card/index.tsx +++ b/components/card/index.tsx @@ -51,6 +51,7 @@ export interface CardProps extends Omit, '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 { children, activeTabKey, defaultActiveTabKey, + tabBarExtraContent, ...others } = this.props; @@ -186,6 +188,7 @@ export default class Card extends React.Component { [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey ? activeTabKey : defaultActiveTabKey, + tabBarExtraContent, }; let head; diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 340472b197..73e8b4c1ac 100644 --- a/components/card/index.zh-CN.md +++ b/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 | - | |