feat(tabs): 新增 align 属性，支持标题左对齐布局 (#2809)

close #2471

packages/nutui-taro-demo/src/nav/pages/tabs/index.vue

@@ -6,6 +6,9 @@
     <h2>{{ t('smile') }}</h2>
     <Smile />
 
+    <h2>{{ t('leftAlign') }}</h2>
+    <LeftAlign />
+
     <h2>{{ t('autoHeight') }}</h2>
     <AutoHeight />
 
@@ -40,11 +43,13 @@ import Vertical from './vertical.vue';
 import VerticalSmile from './vertical-smile.vue';
 import Size from './size.vue';
 import Custom from './custom.vue';
+import LeftAlign from './left-align.vue';
 
 const t = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     smile: '微笑曲线',
+    leftAlign: 'Title 左对齐',
     autoHeight: '自动高度',
     swipeable: '手势滑动切换',
     scroll: '标题滚动（上下布局）',
@@ -56,6 +61,7 @@ const t = useTranslate({
   'en-US': {
     basic: 'Basic Usage',
     smile: 'Smile Type',
+    leftAlign: 'Title left align',
     autoHeight: 'Auto Height',
     swipeable: 'Swipeable',
     scroll: 'Title Scroll (horizontal)',

packages/nutui-taro-demo/src/nav/pages/tabs/left-align.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" align="left">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>

src/packages/__VUE/tabs/demo/index.vue

@@ -6,6 +6,9 @@
     <h2>{{ t('smile') }}</h2>
     <Smile />
 
+    <h2>{{ t('leftAlign') }}</h2>
+    <LeftAlign />
+
     <h2>{{ t('autoHeight') }}</h2>
     <AutoHeight />
 
@@ -40,11 +43,13 @@ import Vertical from './vertical.vue';
 import VerticalSmile from './vertical-smile.vue';
 import Size from './size.vue';
 import Custom from './custom.vue';
+import LeftAlign from './left-align.vue';
 
 const t = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     smile: '微笑曲线',
+    leftAlign: 'Title 左对齐',
     autoHeight: '自动高度',
     swipeable: '手势滑动切换',
     scroll: '标题滚动（上下布局）',
@@ -56,6 +61,7 @@ const t = useTranslate({
   'en-US': {
     basic: 'Basic Usage',
     smile: 'Smile Type',
+    leftAlign: 'Title left align',
     autoHeight: 'Auto Height',
     swipeable: 'Swipeable',
     scroll: 'Title Scroll (horizontal)',

src/packages/__VUE/tabs/demo/left-align.vue

@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" align="left">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>

src/packages/__VUE/tabs/doc.en-US.md

@@ -23,6 +23,10 @@ app.use(TabPane);
 
 > demo: tabs smile
 
+### Title Align to Left v4.2.7
+
+> demo: tabs left-align
+
 ### Auto Height
 
 > demo: tabs auto-height
@@ -71,7 +75,7 @@ app.use(TabPane);
 | auto-height | Automatic height. When set to `true`, `nut-tabs` and `nut-tabs__content` will change with the height of the current `nut-tab-pane`. | boolean | `false` |
 | sticky | Whether to use sticky mode | boolean | `false` |
 | top | Sticky offset top | number | `0` |
-| name | In the `taro` environment, `name` must be set to enable the automatic scrolling function of the title bar. | string | '' |
+| align `v4.2.7` | Title alignment in the horizontal axis direction, optional values `left` `center` | string | `center` |
 
 ### Tabs Slots
 

src/packages/__VUE/tabs/doc.md

@@ -23,6 +23,10 @@ app.use(TabPane);
 
 > demo: tabs smile
 
+### Title 左对齐 v4.2.7
+
+> demo: tabs left-align
+
 ### 自动高度
 
 > demo: tabs auto-height
@@ -71,7 +75,7 @@ app.use(TabPane);
 | auto-height | 自动高度。设置为 true 时，nut-tabs 和 nut-tabs\_\_content 会随着当前 nut-tab-pane 的高度而发生变化。 | boolean | `false` |
 | sticky | 是否使用粘性布局 | boolean | `false` |
 | top | 粘性布局下的吸顶距离 | number | `0` |
-| name | 在`taro`环境下，必须设置`name`以开启标题栏自动滚动功能。 | string | '' |
+| align `v4.2.7` | 横轴方向的标题对齐方式，可选值 left、center | string | `center` |
 
 ### Tabs Slots
 

src/packages/__VUE/tabs/doc.taro.md

@@ -23,6 +23,10 @@ app.use(TabPane);
 
 > demo: tabs smile nav
 
+### Title 左对齐 v4.2.7
+
+> demo: tabs left-align nav
+
 ### 自动高度
 
 > demo: tabs auto-height nav
@@ -70,6 +74,7 @@ app.use(TabPane);
 | size | 标签栏字体尺寸大小 可选值 large normal small | string | `normal` |
 | auto-height | 自动高度。设置为 true 时，nut-tabs 和 nut-tabs\_\_content 会随着当前 nut-tab-pane 的高度而发生变化。 | boolean | `false` |
 | name `v4.2.5 废弃` | 必须设置 name 才能开启 title-scroll 功能，版本 >=4.2.5 时不再需要。 | string | '' |
+| align `v4.2.7` | 横轴方向的标题对齐方式，可选值 left、center | string | `center` |
 
 ### Tabs Slots
 

src/packages/__VUE/tabs/index.scss

@@ -87,6 +87,9 @@
         color: $disable-color;
       }
     }
+    &-left {
+      justify-content: flex-start;
+    }
   }
   &.horizontal {
     flex-direction: column;
@@ -115,6 +118,9 @@
             color: $tabs-tab-smile-color;
           }
         }
+        &-left {
+          flex: 0 0 auto;
+        }
       }
     }
   }

src/packages/__VUE/tabs/index.taro.vue

@@ -12,15 +12,19 @@
       :class="{ [type]: type, scrollable: titleScroll, [size]: size }"
       :style="tabsNavStyle"
     >
-      <view class="nut-tabs__list">
+      <view class="nut-tabs__list" :class="{ 'nut-tabs__titles-left': align === 'left' }">
         <slot v-if="$slots.titles" name="titles"></slot>
         <template v-else>
           <view
             v-for="(item, index) in titles"
             :key="item.paneKey"
             class="nut-tabs__titles-item taro"
             :style="titleStyle"
-            :class="{ active: item.paneKey == modelValue, disabled: item.disabled }"
+            :class="{
+              'nut-tabs__titles-item-left': align === 'left',
+              active: item.paneKey == modelValue,
+              disabled: item.disabled
+            }"
             @click="tabChange(item, index)"
           >
             <view v-if="type == 'line'" class="nut-tabs__titles-item__line" :style="tabsActiveStyle"></view>
@@ -70,7 +74,7 @@ import { TypeOfFun } from '@/packages/utils/util';
 import raf from '@/packages/utils/raf';
 import { useTabContentTouch } from './hooks';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
-import type { RectItem, TabsDirection, TabsSize, TabsType } from './types';
+import type { RectItem, TabsDirection, TabsSize, TabsType, TabsAlign } from './types';
 
 export class Title {
   title = '';
@@ -143,6 +147,10 @@ export default create({
     top: {
       type: Number,
       default: 0
+    },
+    align: {
+      type: String as PropType<TabsAlign>,
+      default: 'center'
     }
   },
   emits: ['update:modelValue', 'click', 'change'],

src/packages/__VUE/tabs/index.vue

@@ -5,7 +5,12 @@
         <view
           ref="navRef"
           class="nut-tabs__titles"
-          :class="{ [type]: type, scrollable: titleScroll, [size]: size }"
+          :class="{
+            'nut-tabs__titles-left': align === 'left',
+            [type]: type,
+            scrollable: titleScroll,
+            [size]: size
+          }"
           :style="tabsNavStyle"
         >
           <slot v-if="$slots.titles" name="titles"></slot>
@@ -15,7 +20,11 @@
               :key="item.paneKey"
               class="nut-tabs__titles-item"
               :style="titleStyle"
-              :class="{ active: item.paneKey == modelValue, disabled: item.disabled }"
+              :class="{
+                'nut-tabs__titles-item-left': align === 'left',
+                active: item.paneKey == modelValue,
+                disabled: item.disabled
+              }"
               @click="tabChange(item, index)"
             >
               <view v-if="type == 'line'" class="nut-tabs__titles-item__line" :style="tabsActiveStyle"></view>
@@ -32,7 +41,7 @@
       <view
         ref="navRef"
         class="nut-tabs__titles"
-        :class="{ [type]: type, scrollable: titleScroll, [size]: size }"
+        :class="{ 'nut-tabs__titles-left': align === 'left', [type]: type, scrollable: titleScroll, [size]: size }"
         :style="tabsNavStyle"
       >
         <slot v-if="$slots.titles" name="titles"></slot>
@@ -43,7 +52,11 @@
             :ref="(e) => setTabItemRef(e as HTMLElement, index)"
             class="nut-tabs__titles-item"
             :style="titleStyle"
-            :class="{ active: item.paneKey == modelValue, disabled: item.disabled }"
+            :class="{
+              'nut-tabs__titles-item-left': align === 'left',
+              active: item.paneKey == modelValue,
+              disabled: item.disabled
+            }"
             @click="tabChange(item, index)"
           >
             <view v-if="type == 'line'" class="nut-tabs__titles-item__line" :style="tabsActiveStyle"></view>
@@ -90,7 +103,7 @@ import { TypeOfFun } from '@/packages/utils/util';
 import { useRect } from '@/packages/utils/useRect';
 import raf from '@/packages/utils/raf';
 import { useTabContentTouch } from './hooks';
-import type { TabsDirection, TabsSize, TabsType } from './types';
+import type { TabsDirection, TabsSize, TabsType, TabsAlign } from './types';
 
 export class Title {
   title = '';
@@ -160,6 +173,10 @@ export default create({
     top: {
       type: Number,
       default: 0
+    },
+    align: {
+      type: String as PropType<TabsAlign>,
+      default: 'center'
     }
   },
   emits: ['update:modelValue', 'click', 'change'],

src/packages/__VUE/tabs/types.ts

@@ -11,3 +11,4 @@ export type RectItem = {
 export type TabsDirection = 'horizontal' | 'vertical';
 export type TabsSize = 'large' | 'normal' | 'small';
 export type TabsType = 'line' | 'smile';
+export type TabsAlign = 'left' | 'center';