fix: fix content adaptive problem when direction is rtl

arco-design · Jan 9, 2025 · d1e91b7 · d1e91b7
1 parent 39b69d5
commit d1e91b7
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 11 deletions.
diff --git a/packages/web-vue/components/tabs/style/index.less b/packages/web-vue/components/tabs/style/index.less
@@ -563,6 +563,22 @@
     padding-top: @tabs-content-padding;
     overflow: hidden;
 
+    .@{tabs-prefix-cls}-content-list {
+      transition: transform 0.3s;
+    }
+
+    .@{tabs-prefix-cls}-content-rtl {
+      direction: rtl;
+    }
+
+    .@{tabs-prefix-cls}-content-ltr {
+      direction: ltr;
+    }
+
+    .@{tabs-prefix-cls}-content-transform {
+      transform: translateX(var(--translate-x));
+    }
+
     &-hide {
       display: none;
     }

diff --git a/packages/web-vue/components/tabs/tabs.tsx b/packages/web-vue/components/tabs/tabs.tsx
@@ -7,6 +7,8 @@ import {
   reactive,
   ref,
   toRefs,
+  onMounted,
+  watch,
 } from 'vue';
 import type { Direction, Size } from '../_utils/constant';
 import type {
@@ -295,6 +297,32 @@ export default defineComponent({
       emit('delete', key, ev);
     };
 
+    const contentClass = computed(() => {
+      const isRtl = document.dir === 'rtl';
+      return {
+        [`${prefixCls}-content-list`]: true,
+        [`${prefixCls}-content-animation`]: props.animation,
+        [`${prefixCls}-content-rtl`]: isRtl,
+        [`${prefixCls}-content-ltr`]: !isRtl,
+        [`${prefixCls}-content-transform`]: true,
+      };
+    });
+
+    onMounted(() => {
+      const updateTransform = () => {
+        const contentList = document.querySelector(
+          `.${prefixCls}-content-list`
+        ) as HTMLElement;
+        if (contentList) {
+          contentList.style.setProperty(
+            '--translate-x',
+            `-${activeIndex.value * 100}%`
+          );
+        }
+      };
+      watch(activeIndex, updateTransform, { immediate: true });
+    });
+
     const renderContent = () => {
       return (
         <div
@@ -305,17 +333,7 @@ export default defineComponent({
             },
           ]}
         >
-          <div
-            class={[
-              `${prefixCls}-content-list`,
-              {
-                [`${prefixCls}-content-animation`]: props.animation,
-              },
-            ]}
-            style={{ marginLeft: `-${activeIndex.value * 100}%` }}
-          >
-            {children.value}
-          </div>
+          <div class={contentClass.value}>{children.value}</div>
         </div>
       );
     };