From cc12109d460bc7a656dac57af43b8ed7a1470f4c Mon Sep 17 00:00:00 2001 From: Ashkan Pourghasem <64011067+ashkan-pm@users.noreply.github.com> Date: Sun, 14 Jun 2020 09:42:44 +0400 Subject: [PATCH] feat: Implement centered prop in Tabs (#24958) * Implement centered in Tabs along with its tests and docs * Fix build error * Add Chinese translations and remove test case Co-authored-by: Ashkan Pourghasem --- .../__tests__/__snapshots__/demo.test.js.snap | 117 ++++++++++++++++++ components/tabs/demo/centered.md | 36 ++++++ components/tabs/index.en-US.md | 1 + components/tabs/index.tsx | 4 +- components/tabs/index.zh-CN.md | 1 + components/tabs/style/index.less | 11 ++ 6 files changed, 169 insertions(+), 1 deletion(-) create mode 100644 components/tabs/demo/centered.md diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap index 5dd049a303..9023845f53 100644 --- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap +++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap @@ -363,6 +363,123 @@ exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = ` `; +exports[`renders ./components/tabs/demo/centered.md correctly 1`] = ` +
+
+
+
+ + + +
+
+
+
+ +
+
+
+
+
+ Content of Tab Pane 1 +
+ +
+`; + exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
( + + + Content of Tab Pane 1 + + + Content of Tab Pane 2 + + + Content of Tab Pane 3 + + +); + +ReactDOM.render(, mountNode); +``` diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 132a43e798..ee12aa01d7 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -28,6 +28,7 @@ Ant Design has 3 types of Tabs for different situations. | 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` | | | size | preset tab bar size | `large` \| `default` \| `small` | `default` | | +| centered | Centers tabs | boolean | false | 4.4.0 | | tabBarExtraContent | Extra content in tab bar | React.ReactNode | - | | | tabBarGutter | The gap between tabs | number | - | | | tabBarStyle | Tab bar style object | object | - | | diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index 7fe7b3fba6..075e2293bc 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -19,10 +19,11 @@ export interface TabsProps extends Omit { type?: TabsType; size?: SizeType; hideAdd?: boolean; + centered?: boolean; onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void; } -function Tabs({ type, className, size, onEdit, hideAdd, ...props }: TabsProps) { +function Tabs({ type, className, size, onEdit, hideAdd, centered, ...props }: TabsProps) { const { prefixCls: customizePrefixCls } = props; const { getPrefixCls, direction } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('tabs', customizePrefixCls); @@ -54,6 +55,7 @@ function Tabs({ type, className, size, onEdit, hideAdd, ...props }: TabsProps) { [`${prefixCls}-${size}`]: size, [`${prefixCls}-card`]: ['card', 'editable-card'].includes(type as string), [`${prefixCls}-editable-card`]: type === 'editable-card', + [`${prefixCls}-centered`]: centered, })} editable={editable} moreIcon={} diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 045a2aa74c..fb7ff43684 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -31,6 +31,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 | | | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | | size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | 'default' | | +| centered | 标签居中展示 | boolean | false | 4.4.0 | | tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | - | | | tabBarGutter | tabs 之间的间隙 | number | - | | | tabBarStyle | tab bar 的样式对象 | object | - | | diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index 2287f94a1c..f40a538a4d 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -103,6 +103,17 @@ flex: none; } + &-centered { + > .@{tab-prefix-cls}-nav, + > div > .@{tab-prefix-cls}-nav { + .@{tab-prefix-cls}-nav-wrap { + &:not([class*='@{tab-prefix-cls}-nav-wrap-ping']) { + justify-content: center; + } + } + } + } + // ============================ InkBar ============================ &-ink-bar { position: absolute;