From 8012a3df3eada86cfff95fbfcec6e95ee4652267 Mon Sep 17 00:00:00 2001
From: 3lang <675483520@qq.com>
Date: Fri, 21 Jan 2022 14:34:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20`Tabs`=20=E6=96=B0=E5=A2=9E=20=20`align?=
 =?UTF-8?q?`=20=E5=B1=9E=E6=80=A7=20(#308)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix #307
---
 packages/react-vant/src/tabs/PropsType.ts     |  7 ++++++-
 packages/react-vant/src/tabs/README.md        |  1 +
 packages/react-vant/src/tabs/Tabs.tsx         |  5 +++--
 packages/react-vant/src/tabs/demo/index.tsx   | 11 ++++++++++-
 packages/react-vant/src/tabs/style/index.less | 14 ++++++++++----
 5 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/react-vant/src/tabs/PropsType.ts b/packages/react-vant/src/tabs/PropsType.ts
index 43b0ced9a..9f16b418c 100644
--- a/packages/react-vant/src/tabs/PropsType.ts
+++ b/packages/react-vant/src/tabs/PropsType.ts
@@ -7,9 +7,14 @@ type ScrollspyConfig = {
   autoFocusLast?: boolean;
   /** 触底偏移量 */
   reachBottomThreshold?: number;
-}
+};
 
 export interface TabsProps extends BaseTypeProps {
+  /**
+   * 标签栏对齐方式
+   * @default 'center'
+   */
+  align?: 'start' | 'center' | string;
   /** 标签主题色	 */
   color?: string;
   /** 是否显示标签栏外边框，仅在 type="line" 时有效	 */
diff --git a/packages/react-vant/src/tabs/README.md b/packages/react-vant/src/tabs/README.md
index 1feaa071d..af81ca8e6 100644
--- a/packages/react-vant/src/tabs/README.md
+++ b/packages/react-vant/src/tabs/README.md
@@ -126,6 +126,7 @@ import { Tabs } from 'react-vant';
 | --- | --- | --- | --- |
 | active | 绑定当前选中标签的标识符 | _number \| string_ | `0` |
 | type | 样式风格类型，可选值为 `card` | _string_ | `line` |
+| align | 标签栏对齐方式, 可选值 `start` `center` | _string_ | `center` |
 | color | 标签主题色 | _string_ | `#ee0a24` |
 | background | 标签栏背景色 | _string_ | `white` |
 | duration | 动画时间，单位秒 | _number \| string_ | `0.3` |
diff --git a/packages/react-vant/src/tabs/Tabs.tsx b/packages/react-vant/src/tabs/Tabs.tsx
index b94f6bec7..cea76adb3 100644
--- a/packages/react-vant/src/tabs/Tabs.tsx
+++ b/packages/react-vant/src/tabs/Tabs.tsx
@@ -45,7 +45,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>((props, ref) => {
   const popupContext = useContext(PopupContext);
   const [bem] = createNamespace('tabs', prefixCls);
 
-  const { children, color, background } = props;
+  const { children, color, align, background } = props;
 
   const root = useRef<HTMLDivElement>(null);
   const [wrapRef, setWrapRef] = useState<HTMLDivElement>(null);
@@ -308,7 +308,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>((props, ref) => {
         <div
           ref={navRef}
           role="tablist"
-          className={clsx(bem('nav', [type, { complete: scrollable }]))}
+          className={clsx(bem('nav', [type, { complete: scrollable, start: align === 'start' }]))}
           style={navStyle}
         >
           {props.navRight}
@@ -425,6 +425,7 @@ Tabs.defaultProps = {
   ellipsis: true,
   lazyRender: true,
   active: 0,
+  align: 'center',
 };
 
 export default Tabs;
diff --git a/packages/react-vant/src/tabs/demo/index.tsx b/packages/react-vant/src/tabs/demo/index.tsx
index 1e970c3ad..e6d725d84 100644
--- a/packages/react-vant/src/tabs/demo/index.tsx
+++ b/packages/react-vant/src/tabs/demo/index.tsx
@@ -12,7 +12,7 @@ export default (): React.ReactNode => {
     <DemoSection>
       <DemoBlock title="基础用法">
         <Tabs onClickTab={(tab) => console.log(tab)}>
-          {[1, 2, 3, 4].map((item) => (
+          {[1, 2, 3].map((item) => (
             <Tabs.TabPane key={item} title={`标签${item}`}>
               内容 {item}
             </Tabs.TabPane>
@@ -46,6 +46,15 @@ export default (): React.ReactNode => {
           <Tabs.TabPane title="标签3">内容3</Tabs.TabPane>
         </Tabs>
       </DemoBlock>
+      <DemoBlock title="对齐方式">
+        <Tabs align="start" onClickTab={(tab) => console.log(tab)}>
+          {[1].map((item) => (
+            <Tabs.TabPane key={item} title={`标签${item}`}>
+              内容 {item}
+            </Tabs.TabPane>
+          ))}
+        </Tabs>
+      </DemoBlock>
       <DemoBlock title="样式风格">
         <Tabs type="card" onClickTab={(tab) => console.log(tab)}>
           {[1, 2, 3].map((item) => (
diff --git a/packages/react-vant/src/tabs/style/index.less b/packages/react-vant/src/tabs/style/index.less
index d6c3c8831..d0c26089a 100644
--- a/packages/react-vant/src/tabs/style/index.less
+++ b/packages/react-vant/src/tabs/style/index.less
@@ -104,7 +104,7 @@
     &--line {
       box-sizing: content-box;
       height: 100%;
-      padding-bottom: 15*@hd; /* 15*@hd padding to hide scrollbar in mobile safari */
+      padding-bottom: 15 * @hd; /* 15*@hd padding to hide scrollbar in mobile safari */
     }
 
     &--line&--complete {
@@ -112,6 +112,13 @@
       padding-left: var(--rv-padding-xs);
     }
 
+    &--start {
+      .@{rv-prefix}-tab {
+        flex: none;
+        padding: 0 var(--rv-padding-sm);
+      }
+    }
+
     &--card {
       box-sizing: border-box;
       height: var(--rv-tabs-card-height);
@@ -121,8 +128,7 @@
 
       .@{rv-prefix}-tab {
         color: var(--rv-tabs-default-color);
-        border-right: var(--rv-border-width-base) solid
-          var(--rv-tabs-default-color);
+        border-right: var(--rv-border-width-base) solid var(--rv-tabs-default-color);
 
         &:last-child {
           border-right: none;
@@ -142,7 +148,7 @@
 
   &__line {
     position: absolute;
-    bottom: 15*@hd;
+    bottom: 15 * @hd;
     left: 0;
     z-index: 1;
     width: var(--rv-tabs-bottom-bar-width);