feat: 修改变量名、新增 demo 文档

jdf2e · Jan 2, 2024 · 52b6c47 · 52b6c47
1 parent ed67de9
commit 52b6c47
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 16 deletions.
diff --git 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 @@
     <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)',

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
@@ -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>
diff --git a/src/packages/__VUE/tabs/demo/index.vue b/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)',

diff --git a/src/packages/__VUE/tabs/demo/left-align.vue b/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>
diff --git 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 左对齐
+
+> demo: tabs left-align
+
 ### Auto Height
 
 > demo: tabs auto-height
@@ -72,7 +76,7 @@ app.use(TabPane);
 | 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 | '' |
-| alignment | Title alignment in the horizontal axis direction, optional values `left` `center` | string | `center` |
+| align | 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
@@ -23,6 +23,10 @@ app.use(TabPane);
 
 > demo: tabs smile
 
+### Title 左对齐
+
+> demo: tabs left-align
+
 ### 自动高度
 
 > demo: tabs auto-height
@@ -72,7 +76,7 @@ app.use(TabPane);
 | sticky | 是否使用粘性布局 | boolean | `false` |
 | top | 粘性布局下的吸顶距离 | number | `0` |
 | name | 在`taro`环境下，必须设置`name`以开启标题栏自动滚动功能。 | string | '' |
-| alignment | 横轴方向的标题对齐方式，可选值 left、center | string | `center` |
+| align | 横轴方向的标题对齐方式，可选值 left、center | string | `center` |
 
 ### Tabs Slots
 

diff --git 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 左对齐
+
+> demo: tabs left-align nav
+
 ### 自动高度
 
 > demo: tabs auto-height nav
@@ -70,7 +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 | '' |
-| alignment | 横轴方向的标题对齐方式，可选值 left、center | string | `center` |
+| align | 横轴方向的标题对齐方式，可选值 left、center | string | `center` |
 
 ### Tabs Slots
 

diff --git 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"
     >
-      <view class="nut-tabs__list" :class="{ 'nut-tabs__titles-left': alignment === 'left' }">
+      <view class="nut-tabs__list" :class="{ 'nut-tabs__titles-left': align === 'left' }">
         <slot v-if="$slots.titles" name="titles"></slot>
         <template v-else>
           <view
@@ -21,7 +21,7 @@
             class="nut-tabs__titles-item taro"
             :style="titleStyle"
             :class="{
-              'nut-tabs__titles-item-left': alignment === 'left',
+              'nut-tabs__titles-item-left': align === 'left',
               active: item.paneKey == modelValue,
               disabled: item.disabled
             }"
@@ -74,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, Alignment } from './types';
+import type { RectItem, TabsDirection, TabsSize, TabsType, TabsAlign } from './types';
 
 export class Title {
   title = '';
@@ -148,8 +148,8 @@ export default create({
       type: Number,
       default: 0
     },
-    alignment: {
-      type: String as PropType<Alignment>,
+    align: {
+      type: String as PropType<TabsAlign>,
       default: 'center'
     }
   },

diff --git a/src/packages/__VUE/tabs/index.vue b/src/packages/__VUE/tabs/index.vue
@@ -6,7 +6,7 @@
           ref="navRef"
           class="nut-tabs__titles"
           :class="{
-            'nut-tabs__titles-left': alignment === 'left',
+            'nut-tabs__titles-left': align === 'left',
             [type]: type,
             scrollable: titleScroll,
             [size]: size
@@ -21,7 +21,7 @@
               class="nut-tabs__titles-item"
               :style="titleStyle"
               :class="{
-                'nut-tabs__titles-item-left': alignment === 'left',
+                'nut-tabs__titles-item-left': align === 'left',
                 active: item.paneKey == modelValue,
                 disabled: item.disabled
               }"
@@ -41,7 +41,7 @@
       <view
         ref="navRef"
         class="nut-tabs__titles"
-        :class="{ 'nut-tabs__titles-left': alignment === 'left', [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>
@@ -53,7 +53,7 @@
             class="nut-tabs__titles-item"
             :style="titleStyle"
             :class="{
-              'nut-tabs__titles-item-left': alignment === 'left',
+              'nut-tabs__titles-item-left': align === 'left',
               active: item.paneKey == modelValue,
               disabled: item.disabled
             }"
@@ -103,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, Alignment } from './types';
+import type { TabsDirection, TabsSize, TabsType, TabsAlign } from './types';
 
 export class Title {
   title = '';
@@ -174,8 +174,8 @@ export default create({
       type: Number,
       default: 0
     },
-    alignment: {
-      type: String as PropType<Alignment>,
+    align: {
+      type: String as PropType<TabsAlign>,
       default: 'center'
     }
   },

diff --git a/src/packages/__VUE/tabs/types.ts b/src/packages/__VUE/tabs/types.ts
@@ -11,4 +11,4 @@ export type RectItem = {
 export type TabsDirection = 'horizontal' | 'vertical';
 export type TabsSize = 'large' | 'normal' | 'small';
 export type TabsType = 'line' | 'smile';
-export type Alignment = 'left' | 'center';
+export type TabsAlign = 'left' | 'center';