From 0c961e27ccb7cf64ad3a4b19bfdcfdc7f1b3b3c2 Mon Sep 17 00:00:00 2001 From: iCheng <138745141+iCheng@users.noreply.github.com> Date: Tue, 2 Jan 2024 17:13:43 +0800 Subject: [PATCH] =?UTF-8?q?feat(tabs):=20=E6=96=B0=E5=A2=9E=20align=20?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=EF=BC=8C=E6=94=AF=E6=8C=81=E6=A0=87=E9=A2=98?= =?UTF-8?q?=E5=B7=A6=E5=AF=B9=E9=BD=90=E5=B8=83=E5=B1=80=20(#2809)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit close #2471 --- .../src/nav/pages/tabs/index.vue | 6 +++++ .../src/nav/pages/tabs/left-align.vue | 11 ++++++++ src/packages/__VUE/tabs/demo/index.vue | 6 +++++ src/packages/__VUE/tabs/demo/left-align.vue | 11 ++++++++ src/packages/__VUE/tabs/doc.en-US.md | 6 ++++- src/packages/__VUE/tabs/doc.md | 6 ++++- src/packages/__VUE/tabs/doc.taro.md | 5 ++++ src/packages/__VUE/tabs/index.scss | 6 +++++ src/packages/__VUE/tabs/index.taro.vue | 14 +++++++--- src/packages/__VUE/tabs/index.vue | 27 +++++++++++++++---- src/packages/__VUE/tabs/types.ts | 1 + 11 files changed, 89 insertions(+), 10 deletions(-) create mode 100644 packages/nutui-taro-demo/src/nav/pages/tabs/left-align.vue create mode 100644 src/packages/__VUE/tabs/demo/left-align.vue 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 @@ + + 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 @@ + + 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" > - +