feat(tabs): add animated-time demo (jd-opensource#2942)

8392 · Mar 4, 2024 · 1b10598 · 1b10598
1 parent b8b43f7
commit 1b10598
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 0 deletions.
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/animated-time.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/animated-time.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" :animated-time="0">
+    <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/index.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue
@@ -6,6 +6,9 @@
     <h2>{{ t('smile') }}</h2>
     <Smile />
 
+    <h2>{{ t('animatedTime') }}</h2>
+    <AnimatedTime />
+
     <h2>{{ t('leftAlign') }}</h2>
     <LeftAlign />
 
@@ -36,6 +39,7 @@
 import { useTranslate } from '../../../utils';
 import Basic from './basic.vue';
 import Smile from './smile.vue';
+import AnimatedTime from './animated-time.vue';
 import AutoHeight from './auto-height.vue';
 import Swipeable from './swipeable.vue';
 import Scroll from './scroll.vue';
@@ -49,6 +53,7 @@ const t = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     smile: '微笑曲线',
+    animatedTime: '无切换动画',
     leftAlign: 'Title 左对齐',
     autoHeight: '自动高度',
     swipeable: '手势滑动切换',
@@ -61,6 +66,7 @@ const t = useTranslate({
   'en-US': {
     basic: 'Basic Usage',
     smile: 'Smile Type',
+    animatedTime: 'Without Animation',
     leftAlign: 'Title left align',
     autoHeight: 'Auto Height',
     swipeable: 'Swipeable',

diff --git a/src/packages/__VUE/tabs/demo/animated-time.vue b/src/packages/__VUE/tabs/demo/animated-time.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" :animated-time="0">
+    <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('animatedTime') }}</h2>
+    <AnimatedTime />
+
     <h2>{{ t('leftAlign') }}</h2>
     <LeftAlign />
 
@@ -36,6 +39,7 @@
 import { useTranslate } from '@/sites/utils';
 import Basic from './basic.vue';
 import Smile from './smile.vue';
+import AnimatedTime from './animated-time.vue';
 import AutoHeight from './auto-height.vue';
 import Swipeable from './swipeable.vue';
 import Scroll from './scroll.vue';
@@ -49,6 +53,7 @@ const t = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     smile: '微笑曲线',
+    animatedTime: '无切换动画',
     leftAlign: 'Title 左对齐',
     autoHeight: '自动高度',
     swipeable: '手势滑动切换',
@@ -61,6 +66,7 @@ const t = useTranslate({
   'en-US': {
     basic: 'Basic Usage',
     smile: 'Smile Type',
+    animatedTime: 'Without Animation',
     leftAlign: 'Title left align',
     autoHeight: 'Auto Height',
     swipeable: 'Swipeable',

diff --git a/src/packages/__VUE/tabs/doc.en-US.md b/src/packages/__VUE/tabs/doc.en-US.md
@@ -23,6 +23,14 @@ app.use(TabPane);
 
 > demo: tabs smile
 
+### Without Animation
+
+By default, Tabs uses Transform layout to implement switching animation. If other Fixed positioned components (such as Popup, Menu), etc. are used internally, style interference will occur.
+
+You can set `animated-time` to 0. At this time, Tabs will have no switching animation and panel switching will be smoother.
+
+> demo: tabs animated-time
+
 ### Title Align to Left v4.2.7
 
 > demo: tabs left-align

diff --git a/src/packages/__VUE/tabs/doc.md b/src/packages/__VUE/tabs/doc.md
@@ -23,6 +23,14 @@ app.use(TabPane);
 
 > demo: tabs smile
 
+### 无切换动画
+
+默认情况下 Tabs 使用 Transform 布局实现切换动画，如果内部使用了其他 Fixed 定位的组件（比如 Popup、Menu）等，会产生样式干扰。
+
+可以设置 `animated-time` 为 0，此时 Tabs 无切换动画，面板切换更流畅。
+
+> demo: tabs animated-time
+
 ### Title 左对齐 v4.2.7
 
 > demo: tabs left-align

diff --git a/src/packages/__VUE/tabs/doc.taro.md b/src/packages/__VUE/tabs/doc.taro.md
@@ -23,6 +23,14 @@ app.use(TabPane);
 
 > demo: tabs smile nav
 
+### 无切换动画
+
+默认情况下 Tabs 使用 Transform 布局实现切换动画，如果内部使用了其他 Fixed 定位的组件（比如 Popup、Menu）等，会产生样式干扰。
+
+可以设置 `animated-time` 为 0，此时 Tabs 无切换动画，面板切换更流畅。
+
+> demo: tabs animated-time nav
+
 ### Title 左对齐 v4.2.7
 
 > demo: tabs left-align nav