diff --git a/components/tabs/TabBar.tsx b/components/tabs/TabBar.tsx index d2184d10b..ef7014692 100644 --- a/components/tabs/TabBar.tsx +++ b/components/tabs/TabBar.tsx @@ -12,6 +12,7 @@ const TabBar = defineComponent({ inheritAttrs: false, props: { prefixCls: PropTypes.string, + centered: PropTypes.looseBool.def(false), tabBarStyle: PropTypes.style, tabBarExtraContent: PropTypes.VNodeChild, type: PropTypes.oneOf(tuple('line', 'card', 'editable-card')), @@ -29,6 +30,7 @@ const TabBar = defineComponent({ }, render() { const { + centered, tabBarStyle, animated = true, renderTabBar, @@ -62,6 +64,7 @@ const TabBar = defineComponent({ // Additional className for style usage const cls = { [this.$attrs.class as string]: this.$attrs.class, + [`${prefixCls}-centered-bar`]: centered, [`${prefixCls}-${tabPosition}-bar`]: true, [`${prefixCls}-${size}-bar`]: !!size, [`${prefixCls}-card-bar`]: type && type.indexOf('card') >= 0, diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index f632616aa..eac4aa3e7 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -243,6 +243,12 @@ } } + .@{tab-prefix-cls}-centered-bar { + .@{tab-prefix-cls}-nav-wrap { + text-align: center; + } + } + // Create an empty element to avoid margin collapsing // https://github.com/ant-design/ant-design/issues/18103 &-content::before { diff --git a/components/tabs/tabs.tsx b/components/tabs/tabs.tsx index 109b38b7c..813316726 100644 --- a/components/tabs/tabs.tsx +++ b/components/tabs/tabs.tsx @@ -28,6 +28,7 @@ export default defineComponent({ activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), hideAdd: PropTypes.looseBool.def(false), + centered: PropTypes.looseBool.def(false), tabBarStyle: PropTypes.object, tabBarExtraContent: PropTypes.any, destroyInactiveTabPane: PropTypes.looseBool.def(false),