diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue
index 392ab94654..93dd5e313e 100644
--- a/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue
+++ b/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue
@@ -6,6 +6,9 @@
{{ t('smile') }}
+ {{ t('leftAlign') }}
+
+
{{ t('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)',
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/left-align.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/left-align.vue
new file mode 100644
index 0000000000..58d20e539b
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/tabs/left-align.vue
@@ -0,0 +1,11 @@
+
+
+ Content 1
+ Content 2
+ Content 3
+
+
+
diff --git a/src/packages/__VUE/tabs/demo/index.vue b/src/packages/__VUE/tabs/demo/index.vue
index 105980f942..b3942f61f1 100644
--- a/src/packages/__VUE/tabs/demo/index.vue
+++ b/src/packages/__VUE/tabs/demo/index.vue
@@ -6,6 +6,9 @@
{{ t('smile') }}
+ {{ t('leftAlign') }}
+
+
{{ t('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)',
diff --git a/src/packages/__VUE/tabs/demo/left-align.vue b/src/packages/__VUE/tabs/demo/left-align.vue
new file mode 100644
index 0000000000..58d20e539b
--- /dev/null
+++ b/src/packages/__VUE/tabs/demo/left-align.vue
@@ -0,0 +1,11 @@
+
+
+ Content 1
+ Content 2
+ Content 3
+
+
+
diff --git a/src/packages/__VUE/tabs/doc.en-US.md b/src/packages/__VUE/tabs/doc.en-US.md
index b8ceb34b21..c82d212da4 100644
--- a/src/packages/__VUE/tabs/doc.en-US.md
+++ b/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
diff --git a/src/packages/__VUE/tabs/doc.md b/src/packages/__VUE/tabs/doc.md
index 35d66983a9..d142e250ec 100644
--- a/src/packages/__VUE/tabs/doc.md
+++ b/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
diff --git a/src/packages/__VUE/tabs/doc.taro.md b/src/packages/__VUE/tabs/doc.taro.md
index d8d16daeab..4927351df1 100644
--- a/src/packages/__VUE/tabs/doc.taro.md
+++ b/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
diff --git a/src/packages/__VUE/tabs/index.scss b/src/packages/__VUE/tabs/index.scss
index f0720c54fc..da9bb263a0 100644
--- a/src/packages/__VUE/tabs/index.scss
+++ b/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;
+ }
}
}
}
diff --git a/src/packages/__VUE/tabs/index.taro.vue b/src/packages/__VUE/tabs/index.taro.vue
index 493f99e100..6a93e41c16 100644
--- a/src/packages/__VUE/tabs/index.taro.vue
+++ b/src/packages/__VUE/tabs/index.taro.vue
@@ -12,7 +12,7 @@
:class="{ [type]: type, scrollable: titleScroll, [size]: size }"
:style="tabsNavStyle"
>
-
+
@@ -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,
+ default: 'center'
}
},
emits: ['update:modelValue', 'click', 'change'],
diff --git a/src/packages/__VUE/tabs/index.vue b/src/packages/__VUE/tabs/index.vue
index 414457584f..ab4179048c 100644
--- a/src/packages/__VUE/tabs/index.vue
+++ b/src/packages/__VUE/tabs/index.vue
@@ -5,7 +5,12 @@
@@ -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)"
>
@@ -32,7 +41,7 @@
@@ -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)"
>
@@ -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,
+ default: 'center'
}
},
emits: ['update:modelValue', 'click', 'change'],
diff --git a/src/packages/__VUE/tabs/types.ts b/src/packages/__VUE/tabs/types.ts
index d8683d9949..efa4d9b568 100644
--- a/src/packages/__VUE/tabs/types.ts
+++ b/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';