feat: Tabs 新增 align 属性 (#308)

fix #307
3lang3 · Jan 21, 2022 · 8012a3d · 8012a3d
1 parent 1507945
commit 8012a3d
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -104,14 +104,21 @@
     &--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 {
       padding-right: var(--rv-padding-xs);
       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);