feat(tabs): add centered tab bar style (vueComponent#3501)

Co-authored-by: 李艺珅 <l>

Author: Hyphon

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,

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 {

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),