mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

feat: tab support moreIcon (#29744)

Browse Source 
* feat: Tabs support moreIcon

* docs: Tabs support moreIcon

* style: lint

* docs: add english document

* Update components/tabs/index.zh-CN.md

Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>

* Update components/tabs/index.en-US.md

Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>

* Update components/tabs/index.zh-CN.md

* Update components/tabs/index.en-US.md

Co-authored-by: zty <zty.dev@outlook.com>
Co-authored-by: zty <zty.dev@icloud.com>
Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>
This commit is contained in:
Tianyuan Zhang 2021-03-13 22:00:42 +08:00 committed by GitHub
parent 37bff5d5fd
commit 691e5b6956
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/tabs/index.en-US.md
View File

@ -28,6 +28,7 @@ Ant Design has 3 types of Tabs for different situations.
| centered | Centers tabs | boolean | false | 4.4.0 |
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | |
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | |
| moreIcon | The custom icon of ellipsis | ReactNode | &lt;EllipsisOutlined /> | 4.14.0 |
| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| size | Preset tab bar size | `large` \| `default` \| `small` | `default` | |
| tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |

7
components/tabs/index.tsx
View File

@ -25,7 +25,10 @@ export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
}
function Tabs({ type, className, size, onEdit, hideAdd, centered, addIcon, ...props }: TabsProps) {
const { prefixCls: customizePrefixCls } = props;
const {
prefixCls: customizePrefixCls,
moreIcon = <EllipsisOutlined />,
} = props;
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('tabs', customizePrefixCls);
@ -63,7 +66,7 @@ function Tabs({ type, className, size, onEdit, hideAdd, centered, addIcon, ...pr
className,
)}
editable={editable}
moreIcon={<EllipsisOutlined />}
moreIcon={moreIcon}
prefixCls={prefixCls}
/>
);

1
components/tabs/index.zh-CN.md
View File

@ -31,6 +31,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
| centered | 标签居中展示 | boolean | false | 4.4.0 |
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | |
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | |
| moreIcon | 自定义折叠 icon | ReactNode | &lt;EllipsisOutlined /> | 4.14.0 |
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` | |
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |