chore(tabs): split demo (#2787)

jdf2e · Dec 21, 2023 · 0b22304 · 0b22304
1 parent 1a5331d
commit 0b22304
Show file tree

Hide file tree

Showing 24 changed files with 487 additions and 975 deletions.
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/auto-height.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/auto-height.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-tabs v-model="value" auto-height>
+    <nut-tab-pane title="Tab 1" pane-key="1">
+      <p>Content 1</p>
+      <p>Content 1</p>
+      <p>Content 1</p>
+      <p>Content 1</p>
+    </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/packages/nutui-taro-demo/src/nav/pages/tabs/basic.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/basic.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value">
+    <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/packages/nutui-taro-demo/src/nav/pages/tabs/custom.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/custom.vue
@@ -0,0 +1,50 @@
+<template>
+  <nut-tabs v-model="value">
+    <template #titles>
+      <div v-for="item in list" :key="item.paneKey" class="custom-tab-item" @click="value = item.paneKey">
+        <div
+          class="custom-title"
+          :class="{
+            active: value === item.paneKey
+          }"
+          >{{ item.title }}</div
+        >
+      </div>
+    </template>
+    <nut-tab-pane v-for="item in list" :key="item.paneKey" :pane-key="item.paneKey"> {{ item.title }} </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('c1');
+const list = ref([
+  {
+    title: 'Tab 1',
+    paneKey: 'c1'
+  },
+  {
+    title: 'Tab 2',
+    paneKey: 'c2'
+  },
+  {
+    title: 'Tab 3',
+    paneKey: 'c3'
+  }
+]);
+</script>
+<style>
+.custom-tab-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+}
+.custom-title {
+  color: black;
+  cursor: pointer;
+}
+.custom-title.active {
+  color: red;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue
@@ -1,142 +1,68 @@
 <template>
   <Demo class="full">
-    <h2>基础用法</h2>
-    <nut-tabs v-model="state.tab1value">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>手势滑动切换</h2>
-    <nut-tabs v-model="state.tab1value" swipeable>
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>基础用法-微笑曲线</h2>
-    <nut-tabs v-model="state.tab11value" type="smile">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>通过 pane-key 匹配</h2>
-    <nut-tabs v-model="state.tab2value">
-      <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2" pane-key="1" :disabled="true"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>Tab Pane 自动高度</h2>
-    <nut-tabs v-model="state.tab2value" :auto-height="true">
-      <nut-tab-pane title="Tab 1" pane-key="0">
-        <p>Tab 1</p>
-        <p>Tab 1</p>
-        <p>Tab 1</p>
-        <p>Tab 1</p>
-      </nut-tab-pane>
-      <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>数据异步渲染 3s</h2>
-    <nut-tabs v-model="state.tab3value">
-      <nut-tab-pane v-for="item in state.list3" :key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-    </nut-tabs>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>数量多，滚动操作（横向）</h2>
-    <nut-tabs v-model="state.tab4value" title-scroll title-gutter="10" name="tab4value">
-      <nut-tab-pane v-for="item in state.list4" :key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-    </nut-tabs>
-    <h2>数量多，滚动操作（纵向）</h2>
-    <nut-tabs
-      v-model="state.tab4value"
-      title-scroll
-      name="tab4valueVertical"
-      direction="vertical"
-      style="height: 220px"
-    >
-      <nut-tab-pane v-for="item in state.list4" :key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-    </nut-tabs>
-    <h2>左右布局</h2>
-    <nut-tabs v-model="state.tab5value" style="height: 300px" title-scroll direction="vertical">
-      <nut-tab-pane v-for="item in state.list5" :key="item" :pane-key="item" :title="'Tab ' + item">
-        Tab {{ item }}
-      </nut-tab-pane>
-    </nut-tabs>
-    <h2>左右布局-微笑曲线</h2>
-    <nut-tabs v-model="state.tab6value" style="height: 300px" type="smile" title-scroll direction="vertical">
-      <nut-tab-pane v-for="item in state.list5" :key="item" :pane-key="item" :title="'Tab ' + item">
-        Tab {{ item }}
-      </nut-tab-pane>
-    </nut-tabs>
-    <h2>标签栏字体尺寸 large normal small </h2>
-    <nut-tabs v-model="state.tab1value" size="large">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <nut-tabs v-model="state.tab1value" size="normal">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <nut-tabs v-model="state.tab1value" size="small">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>自定义标签栏</h2>
-    <nut-tabs v-model="state.tab7value">
-      <template #titles>
-        <div
-          v-for="item in state.list6"
-          :key="item.paneKey"
-          class="nut-tabs__titles-item"
-          :class="{ active: state.tab7value == item.paneKey }"
-          @click="state.tab7value = item.paneKey"
-        >
-          <Dongdong />
-          <span class="nut-tabs__titles-item__text">{{ item.title }}</span>
-          <span class="nut-tabs__titles-item__line"></span>
-        </div>
-      </template>
-      <nut-tab-pane v-for="item in state.list6" :key="item" :pane-key="item.paneKey">
-        {{ item.title }}
-      </nut-tab-pane>
-    </nut-tabs>
+    <h2>{{ t('smile') }}</h2>
+    <Smile />
+
+    <h2>{{ t('autoHeight') }}</h2>
+    <AutoHeight />
+
+    <h2>{{ t('swipeable') }}</h2>
+    <Swipeable />
+
+    <h2>{{ t('scroll') }}</h2>
+    <Scroll />
+
+    <h2>{{ t('vertical') }}</h2>
+    <Vertical />
+
+    <h2>{{ t('verticalSmile') }}</h2>
+    <VerticalSmile />
+
+    <h2>{{ t('size') }}</h2>
+    <Size />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { Dongdong } from '@nutui/icons-vue-taro';
-import { reactive } from 'vue';
-const state = reactive({
-  tab1value: '0',
-  tab11value: '0',
-  tab2value: '0',
-  tab3value: '0',
-  tab4value: '0',
-  tab5value: '0',
-  tab6value: '0',
-  tab7value: 'c1',
-  list3: Array.from(new Array(2).keys()),
-  list4: Array.from(new Array(10).keys()),
-  list5: Array.from(new Array(2).keys()),
-  list6: [
-    {
-      title: '自定义 1',
-      paneKey: 'c1',
-      icon: 'dongdong'
-    },
-    {
-      title: '自定义 2',
-      paneKey: 'c2',
-      icon: 'JD'
-    },
-    {
-      title: '自定义 3',
-      paneKey: 'c3'
-    }
-  ]
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Smile from './smile.vue';
+import AutoHeight from './auto-height.vue';
+import Swipeable from './swipeable.vue';
+import Scroll from './scroll.vue';
+import Vertical from './vertical.vue';
+import VerticalSmile from './vertical-smile.vue';
+import Size from './size.vue';
+import Custom from './custom.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    smile: '微笑曲线',
+    autoHeight: '自动高度',
+    swipeable: '手势滑动切换',
+    scroll: '标题滚动（上下布局）',
+    vertical: '标题滚动（左右布局）',
+    verticalSmile: '左右布局-微笑曲线',
+    size: '字体尺寸',
+    custom: '自定义标签栏'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    smile: 'Smile Type',
+    autoHeight: 'Auto Height',
+    swipeable: 'Swipeable',
+    scroll: 'Title Scroll (horizontal)',
+    vertical: 'Title Scroll (vertical)',
+    verticalSmile: 'Vertical + Smile Type',
+    size: 'FontSize',
+    custom: 'Custom Tab'
+  }
 });
-setTimeout(() => {
-  state.list3.push(999);
-}, 3000);
 </script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/scroll.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/scroll.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-tabs v-model="value" title-scroll title-gutter="10" name="tabName">
+    <nut-tab-pane v-for="item in list" :key="item" :title="`Tab ${item}`" :pane-key="item">
+      Content {{ item }}
+    </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+const list = new Array(10).fill(0).map((_, index) => index + 1);
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/size.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/size.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-tabs v-model="value" size="large">
+    <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>
+  <nut-tabs v-model="value" size="normal">
+    <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>
+  <nut-tabs v-model="value" size="small">
+    <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/packages/nutui-taro-demo/src/nav/pages/tabs/smile.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/smile.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" type="smile">
+    <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/packages/nutui-taro-demo/src/nav/pages/tabs/swipeable.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/swipeable.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" swipeable>
+    <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/packages/nutui-taro-demo/src/nav/pages/tabs/vertical-smile.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/vertical-smile.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" type="smile" direction="vertical">
+    <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/packages/nutui-taro-demo/src/nav/pages/tabs/vertical.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/vertical.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-tabs v-model="value" direction="vertical" title-scroll style="height: 200px" name="tabName">
+    <nut-tab-pane v-for="item in list" :key="item" :title="`Tab ${item}`" :pane-key="item">
+      Content {{ item }}
+    </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+const list = new Array(10).fill(0).map((_, index) => index + 1);
+</script>