diff --git a/components/config-provider/__tests__/components.test.tsx b/components/config-provider/__tests__/components.test.tsx index 66e830700709..32037dc26bc3 100644 --- a/components/config-provider/__tests__/components.test.tsx +++ b/components/config-provider/__tests__/components.test.tsx @@ -39,7 +39,6 @@ import Select from '../../select'; import Skeleton from '../../skeleton'; import type { SliderTooltipProps } from '../../slider'; import Slider from '../../slider'; -// eslint-disable-next-line import/no-named-as-default import { render } from '../../../tests/utils'; import Spin from '../../spin'; import Statistic from '../../statistic'; diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index dc2c1944106b..d01049f9d2b0 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -11,6 +11,7 @@ import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/inter import type { SizeType } from './SizeContext'; import type { RenderEmptyHandler } from './defaultRenderEmpty'; import type { ShowWaveEffect } from '../_util/wave/interface'; +import type { TabsProps } from '../tabs'; export const defaultIconPrefixCls = 'anticon'; @@ -143,7 +144,7 @@ export interface ConfigConsumerProps { tag?: ComponentStyleConfig; table?: ComponentStyleConfig; card?: ComponentStyleConfig; - tabs?: ComponentStyleConfig; + tabs?: ComponentStyleConfig & Pick; timeline?: ComponentStyleConfig; timePicker?: ComponentStyleConfig; upload?: ComponentStyleConfig; diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 4dab026c78cc..88647bbb4815 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -43,6 +43,7 @@ import type { SizeType } from './SizeContext'; import SizeContext, { SizeContextProvider } from './SizeContext'; import useStyle from './style'; import { defaultTheme } from '../theme/context'; +import type { TabsProps } from '../tabs'; /** * Since too many feedback using static method like `Modal.confirm` not getting theme, we record the @@ -180,7 +181,7 @@ export interface ConfigProviderProps { tag?: ComponentStyleConfig; table?: ComponentStyleConfig; card?: ComponentStyleConfig; - tabs?: ComponentStyleConfig; + tabs?: ComponentStyleConfig & Pick; timeline?: ComponentStyleConfig; timePicker?: ComponentStyleConfig; upload?: ComponentStyleConfig; diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap index 01e230e03cff..1ee0943fbf1a 100644 --- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1992,6 +1992,147 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx extend context corr exports[`renders components/tabs/demo/custom-add-trigger.tsx extend context correctly 2`] = `[]`; +exports[`renders components/tabs/demo/custom-indicator.tsx extend context correctly 1`] = ` +
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+
    + +
+
+
+
+
+ Content of Tab Pane 1 +
+
+
+
+`; + +exports[`renders components/tabs/demo/custom-indicator.tsx extend context correctly 2`] = `[]`; + exports[`renders components/tabs/demo/custom-tab-bar.tsx extend context correctly 1`] = `
`; +exports[`renders components/tabs/demo/custom-indicator.tsx correctly 1`] = ` +
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+
+ Content of Tab Pane 1 +
+
+
+
+`; + exports[`renders components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
{ ); errorSpy.mockRestore(); }); + + it('indicator in ConfigProvider should work', () => { + const { container } = render( + + + + + , + ); + + expect(container.querySelector('.Tabs_1 .ant-tabs-ink-bar')).toHaveStyle({ width: 12 }); + expect(container.querySelector('.Tabs_2 .ant-tabs-ink-bar')).toHaveStyle({ width: 12 }); + expect(container.querySelector('.Tabs_3 .ant-tabs-ink-bar')).toHaveStyle({ width: 4 }); + }); }); diff --git a/components/tabs/demo/custom-indicator.md b/components/tabs/demo/custom-indicator.md new file mode 100644 index 000000000000..59424ef38d6c --- /dev/null +++ b/components/tabs/demo/custom-indicator.md @@ -0,0 +1,7 @@ +## zh-CN + +自定义指示器宽度 + +## en-US + +Custom indicator size diff --git a/components/tabs/demo/custom-indicator.tsx b/components/tabs/demo/custom-indicator.tsx new file mode 100644 index 000000000000..30be73c8b070 --- /dev/null +++ b/components/tabs/demo/custom-indicator.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Tabs } from 'antd'; +import type { TabsProps } from 'antd'; + +const onChange = (key: string) => { + console.log(key); +}; + +const items: TabsProps['items'] = [ + { + key: '1', + label: 'Tab 1', + children: 'Content of Tab Pane 1', + }, + { + key: '2', + label: 'Tab 2', + children: 'Content of Tab Pane 2', + }, + { + key: '3', + label: 'Tab 3', + children: 'Content of Tab Pane 3', + }, +]; + +const App: React.FC = () => ( + origin - 16} + /> +); + +export default App; diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 9b96f7ada940..6dba1a34c162 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -23,6 +23,7 @@ Ant Design has 3 types of Tabs for different situations. Disabled Centered Icon +Indicator Slide Extra content Size @@ -52,7 +53,7 @@ Common props ref：[Common props](/docs/react/common-props) | 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 | | -| indicatorLength | Customize length of indicator, which is the same as tab by default | number \| (origin: number) => number | - | 5.9.0 | +| indicatorSize | Customize length of indicator, which is the same as tab by default | number \| (origin: number) => number | - | 5.9.0 | | items | Configure tab content | [TabItemType](#tabitemtype) | [] | 4.23.0 | | moreIcon | The custom icon of ellipsis | ReactNode | <EllipsisOutlined /> | 4.14.0 | | popupClassName | `className` for more dropdown. | string | - | 4.21.0 | diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index afe8ee6e72ad..54315945f2df 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -48,6 +48,7 @@ const Tabs: React.FC & { TabPane: typeof TabPane } = (props) => { items, animated, style, + indicatorSize, ...otherProps } = props; const { prefixCls: customizePrefixCls, moreIcon = } = otherProps; @@ -107,6 +108,7 @@ const Tabs: React.FC & { TabPane: typeof TabPane } = (props) => { moreIcon={moreIcon} prefixCls={prefixCls} animated={mergedAnimated} + indicatorSize={indicatorSize ?? tabs?.indicatorSize} />, ); }; diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 0f415ba72eda..ad4d33cb4f20 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -26,6 +26,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 禁用 居中 图标 +指示条 滑动 附加内容 大小 @@ -54,7 +55,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | centered | 标签居中展示 | boolean | false | 4.4.0 | | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | | | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | -| indicatorLength | 自定义指示条长度，默认与 tab 等宽 | number \| (origin: number) => number | - | 5.9.0 | +| indicatorSize | 自定义指示条长度，默认与 tab 等宽 | number \| (origin: number) => number | - | 5.9.0 | | items | 配置选项卡内容 | [TabItemType](#tabitemtype) | [] | 4.23.0 | | moreIcon | 自定义折叠 icon | ReactNode | <EllipsisOutlined /> | 4.14.0 | | popupClassName | 更多菜单的 `className` | string | - | 4.21.0 | diff --git a/package.json b/package.json index 84f70c5ba16c..19abc16e9c33 100644 --- a/package.json +++ b/package.json @@ -148,7 +148,7 @@ "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", "rc-table": "~7.33.1", - "rc-tabs": "~12.11.0", + "rc-tabs": "~12.11.1", "rc-textarea": "~1.3.3", "rc-tooltip": "~6.0.0", "rc-tree": "~5.7.6",