@arco-design/mobile-react 2.27.4 → 2.28.0

package/umd/slider/popover.js

@@ -33,15 +33,19 @@
         _useContext$prefixCls = _useContext.prefixCls,
         prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls;
 
+    var domRef = (0, _react.useRef)(null);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls + "-slider-popover-wrapper"
     }, /*#__PURE__*/_react.default.createElement(_transition.default, {
       in: visible,
       timeout: 300,
       type: "fade",
-      mountOnEnter: true
+      mountOnEnter: true,
+      unmountOnExit: true,
+      nodeRef: domRef
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: prefixCls + "-slider-popover" + (content ? '' : ' no-content')
+      className: prefixCls + "-slider-popover" + (content ? '' : ' no-content'),
+      ref: domRef
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls + "-slider-popover-content"
     }, content), /*#__PURE__*/_react.default.createElement("div", {

package/umd/stepper/hooks/useButtonClick.js

@@ -33,16 +33,15 @@
         updateValue = params.updateValue,
         onAddButtonClick = params.onAddButtonClick,
         onMinusButtonClick = params.onMinusButtonClick;
+    var minusDisable = actualInputValue <= min || disabled;
 
-    var _useState = (0, _react.useState)(function () {
-      return actualInputValue === min || disabled;
-    }),
+    var _useState = (0, _react.useState)(minusDisable),
         minusButtonDisable = _useState[0],
         setMinusButtonDisable = _useState[1];
 
-    var _useState2 = (0, _react.useState)(function () {
-      return actualInputValue === max || disabled;
-    }),
+    var addDisable = actualInputValue >= max || disabled;
+
+    var _useState2 = (0, _react.useState)(addDisable),
         addButtonDisable = _useState2[0],
         setAddButtonDisable = _useState2[1];
 
@@ -73,9 +72,9 @@
 
 
     (0, _react.useEffect)(function () {
-      setMinusButtonDisable(actualInputValue <= min);
-      setAddButtonDisable(actualInputValue >= max);
-    }, [actualInputValue]);
+      setMinusButtonDisable(minusDisable);
+      setAddButtonDisable(addDisable);
+    }, [minusDisable, addDisable]);
     return {
       minusButtonDisable: minusButtonDisable,
       addButtonDisable: addButtonDisable,

package/umd/sticky/index.d.ts

@@ -10,6 +10,11 @@ export interface StickyRef {
      * @en In the local scrolling mode, if there is nested scrolling outside the container, this method can be actively called to make the sticky element actively update the fixed position
      */
     recalculatePosition: () => void;
+    /**
+     * 手动更新占位模块的高度
+     * @en Manually update the height of the placeholder
+     */
+    updatePlaceholderLayout: () => void;
 }
 export interface StickyEventPayload {
     /**

package/umd/sticky/index.js

@@ -161,6 +161,22 @@
       });
       framePendingRef.current = true;
     }, [containerEventHandler]);
+    var updatePlaceholderLayoutInner = (0, _react.useCallback)(function () {
+      if (placeholderRef.current) {
+        var contentHeight = contentCalculateHeightRef.current; // 当元素吸顶时，默认有一个占位的元素占住该元素的位置，避免布局产生抖动
+        // @en When an element is sticky to the top, a placeholder element occupies the element's position by default to avoid jitter in the layout
+
+        placeholderRef.current.style.height = (isStickyRef.current ? contentHeight : 0) + "px";
+      }
+    }, []);
+    var updatePlaceholderLayout = (0, _react.useCallback)(function () {
+      if (contentRef.current) {
+        var contentClientRect = contentRef.current.getBoundingClientRect();
+        contentCalculateHeightRef.current = contentClientRect.height;
+      }
+
+      updatePlaceholderLayoutInner();
+    }, []);
     (0, _react.useEffect)(function () {
       var containerEle = (0, _mobileUtils.getActualContainer)(getContainer);
       containerRef.current = containerEle || document.body;
@@ -183,18 +199,15 @@
       };
     }, [getContainer, getScrollContainer, recalculatePosition]);
     (0, _react.useEffect)(function () {
-      if (placeholderRef.current) {
-        // 当元素吸顶时，默认有一个占位的元素占住该元素的位置，避免布局产生抖动
-        // @en When an element is sticky to the top, a placeholder element occupies the element's position by default to avoid jitter in the layout
-        placeholderRef.current.style.height = (isStickyRef.current ? contentCalculateHeightRef.current : 0) + "px";
-      }
+      updatePlaceholderLayoutInner();
     }, [isSticky, wasSticky]);
     (0, _react.useImperativeHandle)(ref, function () {
       return {
         dom: contentRef.current,
-        recalculatePosition: recalculatePosition
+        recalculatePosition: recalculatePosition,
+        updatePlaceholderLayout: updatePlaceholderLayout
       };
-    }, [recalculatePosition]);
+    }, [recalculatePosition, updatePlaceholderLayout]);
     var computedStyle = (0, _react.useMemo)(function () {
       return (0, _extends2.default)({}, style || {}, stickyStateStyle);
     }, [stickyStateStyle, style]);

package/umd/style.d.ts

@@ -1,35 +1,32 @@
 import '../style/public.less';
-import './button/style';
+import './tabs/style';
+import './sticky/style';
+import './load-more/style';
+import './cell/style';
 import './action-sheet/style';
 import './avatar/style';
 import './badge/style';
+import './button/style';
 import './carousel/style';
-import './cell/style';
 import './checkbox/style';
 import './circle-progress/style';
 import './collapse/style';
 import './context-provider/style';
 import './count-down/style';
 import './date-picker/style';
-import './divider/style';
 import './dialog/style';
+import './divider/style';
 import './dropdown/style';
 import './dropdown-menu/style';
 import './ellipsis/style';
 import './form/style';
-import './input/style';
-import './textarea/style';
-import './radio/style';
-import './image-picker/style';
-import './rate/style';
-import './slider/style';
 import './grid/style';
 import './image/style';
-import './show-monitor/style';
+import './image-picker/style';
 import './image-preview/style';
 import './index-bar/style';
+import './input/style';
 import './keyboard/style';
-import './load-more/style';
 import './loading/style';
 import './masking/style';
 import './nav-bar/style';
@@ -44,15 +41,18 @@ import './popup-swiper/style';
 import './portal/style';
 import './progress/style';
 import './pull-refresh/style';
+import './radio/style';
+import './rate/style';
 import './search-bar/style';
+import './show-monitor/style';
+import './slider/style';
 import './stepper/style';
 import './steps/style';
-import './sticky/style';
 import './swipe-action/style';
 import './swipe-load/style';
 import './switch/style';
 import './tab-bar/style';
-import './tabs/style';
 import './tag/style';
+import './textarea/style';
 import './toast/style';
 import './transition/style';

package/umd/style.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["../style/public.less", "./button/style", "./action-sheet/style", "./avatar/style", "./badge/style", "./carousel/style", "./cell/style", "./checkbox/style", "./circle-progress/style", "./collapse/style", "./context-provider/style", "./count-down/style", "./date-picker/style", "./divider/style", "./dialog/style", "./dropdown/style", "./dropdown-menu/style", "./ellipsis/style", "./form/style", "./input/style", "./textarea/style", "./radio/style", "./image-picker/style", "./rate/style", "./slider/style", "./grid/style", "./image/style", "./show-monitor/style", "./image-preview/style", "./index-bar/style", "./keyboard/style", "./load-more/style", "./loading/style", "./masking/style", "./nav-bar/style", "./notice-bar/style", "./notify/style", "./pagination/style", "./picker/style", "./picker-view/style", "./popover/style", "./popup/style", "./popup-swiper/style", "./portal/style", "./progress/style", "./pull-refresh/style", "./search-bar/style", "./stepper/style", "./steps/style", "./sticky/style", "./swipe-action/style", "./swipe-load/style", "./switch/style", "./tab-bar/style", "./tabs/style", "./tag/style", "./toast/style", "./transition/style"], factory);
+    define(["../style/public.less", "./tabs/style", "./sticky/style", "./load-more/style", "./cell/style", "./action-sheet/style", "./avatar/style", "./badge/style", "./button/style", "./carousel/style", "./checkbox/style", "./circle-progress/style", "./collapse/style", "./context-provider/style", "./count-down/style", "./date-picker/style", "./dialog/style", "./divider/style", "./dropdown/style", "./dropdown-menu/style", "./ellipsis/style", "./form/style", "./grid/style", "./image/style", "./image-picker/style", "./image-preview/style", "./index-bar/style", "./input/style", "./keyboard/style", "./loading/style", "./masking/style", "./nav-bar/style", "./notice-bar/style", "./notify/style", "./pagination/style", "./picker/style", "./picker-view/style", "./popover/style", "./popup/style", "./popup-swiper/style", "./portal/style", "./progress/style", "./pull-refresh/style", "./radio/style", "./rate/style", "./search-bar/style", "./show-monitor/style", "./slider/style", "./stepper/style", "./steps/style", "./swipe-action/style", "./swipe-load/style", "./switch/style", "./tab-bar/style", "./tag/style", "./textarea/style", "./toast/style", "./transition/style"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(require("../style/public.less"), require("./button/style"), require("./action-sheet/style"), require("./avatar/style"), require("./badge/style"), require("./carousel/style"), require("./cell/style"), require("./checkbox/style"), require("./circle-progress/style"), require("./collapse/style"), require("./context-provider/style"), require("./count-down/style"), require("./date-picker/style"), require("./divider/style"), require("./dialog/style"), require("./dropdown/style"), require("./dropdown-menu/style"), require("./ellipsis/style"), require("./form/style"), require("./input/style"), require("./textarea/style"), require("./radio/style"), require("./image-picker/style"), require("./rate/style"), require("./slider/style"), require("./grid/style"), require("./image/style"), require("./show-monitor/style"), require("./image-preview/style"), require("./index-bar/style"), require("./keyboard/style"), require("./load-more/style"), require("./loading/style"), require("./masking/style"), require("./nav-bar/style"), require("./notice-bar/style"), require("./notify/style"), require("./pagination/style"), require("./picker/style"), require("./picker-view/style"), require("./popover/style"), require("./popup/style"), require("./popup-swiper/style"), require("./portal/style"), require("./progress/style"), require("./pull-refresh/style"), require("./search-bar/style"), require("./stepper/style"), require("./steps/style"), require("./sticky/style"), require("./swipe-action/style"), require("./swipe-load/style"), require("./switch/style"), require("./tab-bar/style"), require("./tabs/style"), require("./tag/style"), require("./toast/style"), require("./transition/style"));
+    factory(require("../style/public.less"), require("./tabs/style"), require("./sticky/style"), require("./load-more/style"), require("./cell/style"), require("./action-sheet/style"), require("./avatar/style"), require("./badge/style"), require("./button/style"), require("./carousel/style"), require("./checkbox/style"), require("./circle-progress/style"), require("./collapse/style"), require("./context-provider/style"), require("./count-down/style"), require("./date-picker/style"), require("./dialog/style"), require("./divider/style"), require("./dropdown/style"), require("./dropdown-menu/style"), require("./ellipsis/style"), require("./form/style"), require("./grid/style"), require("./image/style"), require("./image-picker/style"), require("./image-preview/style"), require("./index-bar/style"), require("./input/style"), require("./keyboard/style"), require("./loading/style"), require("./masking/style"), require("./nav-bar/style"), require("./notice-bar/style"), require("./notify/style"), require("./pagination/style"), require("./picker/style"), require("./picker-view/style"), require("./popover/style"), require("./popup/style"), require("./popup-swiper/style"), require("./portal/style"), require("./progress/style"), require("./pull-refresh/style"), require("./radio/style"), require("./rate/style"), require("./search-bar/style"), require("./show-monitor/style"), require("./slider/style"), require("./stepper/style"), require("./steps/style"), require("./swipe-action/style"), require("./swipe-load/style"), require("./switch/style"), require("./tab-bar/style"), require("./tag/style"), require("./textarea/style"), require("./toast/style"), require("./transition/style"));
   } else {
     var mod = {
       exports: {}

package/umd/switch/index.js

@@ -22,6 +22,9 @@
   function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
   var Switch = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        useRtl = _useContext.useRtl;
+
     var system = (0, _helpers.useSystem)();
     var className = props.className,
         style = props.style,
@@ -89,13 +92,15 @@
 
       var touchEndX = e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientX : 0;
       var distance = touchEndX - touchStartX;
+      var swipeRight = useRtl ? distance < 0 : distance > 0;
+      var swipeLeft = useRtl ? distance > 0 : distance < 0;
       var newChecked = false; // 右滑打开
       // @en Swipe right to open
 
-      if (distance > 0) {
+      if (swipeRight) {
         newChecked = true; // 左滑关闭
         // @en Swipe left to close
-      } else if (distance < 0) {
+      } else if (swipeLeft) {
         newChecked = false; // 点击时取反
         // @en Invert on clicking
       } else {

package/umd/switch/style/css/index.css

@@ -44,15 +44,31 @@
   right: auto;
   left:  5PX ;
 }
+[dir="rtl"] .arco-switch.type-android.checked .arco-switch-text {
+  right: initial;
+  left: auto;
+}
+[dir="rtl"] .arco-switch.type-android.checked .arco-switch-text {
+  left: initial;
+  right:  5PX ;
+}
 .arco-switch.type-android.checked .arco-switch-inner {
   -webkit-transform:  translateX(16PX) ;
           transform:  translateX(16PX) ;
 }
+[dir="rtl"] .arco-switch.type-android.checked .arco-switch-inner {
+  -webkit-transform: rotate(180deg) translateX(16PX) ;
+          transform: rotate(180deg) translateX(16PX) ;
+}
 .arco-switch.type-android .arco-switch-inner {
   width:  20PX ;
   height:  20PX ;
   box-shadow:  0 2PX 4PX 0 rgba(0, 0, 0, 0.08) ;
 }
+[dir="rtl"] .arco-switch.type-android .arco-switch-inner {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
 .arco-switch.type-android.disabled.checked {
   background-color:  #94bfff ;
 }
@@ -63,6 +79,10 @@
   font-size:  12PX ;
   right:  5PX ;
 }
+[dir="rtl"] .arco-switch.type-android .arco-switch-text {
+  right: initial;
+  left:  5PX ;
+}
 .arco-switch.type-ios {
   width:  1.02rem ;
   height:  0.62rem ;
@@ -83,11 +103,23 @@
   right: auto;
   left:  0.12rem ;
 }
+[dir="rtl"] .arco-switch.type-ios.checked .arco-switch-text {
+  right: initial;
+  left: auto;
+}
+[dir="rtl"] .arco-switch.type-ios.checked .arco-switch-text {
+  left: initial;
+  right:  0.12rem ;
+}
 .arco-switch.type-ios.checked .arco-switch-inner {
   -webkit-transform:  translateX(0.4rem) ;
           transform:  translateX(0.4rem) ;
   box-shadow:  0 3PX 2PX 0 rgba(0, 0, 0, 0.12) ;
 }
+[dir="rtl"] .arco-switch.type-ios.checked .arco-switch-inner {
+  -webkit-transform: rotate(180deg) translateX(0.4rem) ;
+          transform: rotate(180deg) translateX(0.4rem) ;
+}
 .arco-switch.type-ios.disabled.checked {
   opacity:  0.3 ;
 }
@@ -95,6 +127,10 @@
   font-size:  0.28rem ;
   right:  0.12rem ;
 }
+[dir="rtl"] .arco-switch.type-ios .arco-switch-text {
+  right: initial;
+  left:  0.12rem ;
+}
 .arco-switch.type-ios .arco-switch-inner {
   width:  0.54rem ;
   height:  0.54rem ;
@@ -136,6 +172,10 @@
     border-radius: 150%;
   }
 }
+[dir="rtl"] .arco-switch.type-ios .arco-switch-inner {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
 .arco-switch.type-ios.disabled.checked {
   background-color:  #4DD865 ;
 }
@@ -169,6 +209,10 @@
   -webkit-transition:  all 0.2s ;
   transition:  all 0.2s ;
 }
+[dir="rtl"] .arco-switch-inner {
+  left: initial;
+  right: 0;
+}
 .fully .arco-switch-inner {
   border-radius:  50% ;
 }

package/umd/switch/style/index.less

@@ -33,17 +33,23 @@
         &.checked {
             .use-var(background-color, switch-android-checked-background);
             .@{prefix}-switch-text {
-                right: auto;
-                .use-var(left, switch-android-text-gap-size);
+                .set-prop-with-rtl(right, auto);
+                .use-var-with-rtl(left, switch-android-text-gap-size);
             }
             .@{prefix}-switch-inner {
                 .use-var(transform, switch-android-checked-inner-transform);
+                [dir="rtl"] & {
+                    .use-var(transform, switch-android-checked-inner-transform, "rotate(180deg)");
+                }
             }
         }
         .@{prefix}-switch-inner {
             .use-var(width, switch-android-inner-diameter-size);
             .use-var(height, switch-android-inner-diameter-size);
             .use-var(box-shadow, switch-android-inner-box-shadow);
+            [dir="rtl"] & {
+                transform: rotate(180deg);
+            }
         }
 
         &.disabled {
@@ -58,7 +64,7 @@
         }
         .@{prefix}-switch-text {
             .use-var(font-size, switch-android-text-font-size);
-            .use-var(right, switch-android-text-gap-size);
+            .use-var-with-rtl(right, switch-android-text-gap-size);
         }
     }
 
@@ -80,12 +86,15 @@
         &.checked {
             .use-var(background-color, switch-ios-checked-background);
             .@{prefix}-switch-text {
-                right: auto;
-                .use-var(left, switch-ios-text-gap-size);
+                .set-prop-with-rtl(right, auto);
+                .use-var-with-rtl(left, switch-ios-text-gap-size);
             }
             .@{prefix}-switch-inner {
                 .use-var(transform, switch-ios-checked-inner-transform);
                 .use-var(box-shadow, switch-ios-inner-box-shadow);
+                [dir="rtl"] & {
+                    .use-var(transform, switch-ios-checked-inner-transform, "rotate(180deg)");
+                }
             }
         }
 
@@ -94,12 +103,15 @@
         }
         .@{prefix}-switch-text {
             .use-var(font-size, switch-ios-text-font-size);
-            .use-var(right, switch-ios-text-gap-size);
+            .use-var-with-rtl(right, switch-ios-text-gap-size);
         }
         .@{prefix}-switch-inner {
             .use-var(width, switch-ios-inner-diameter-size);
             .use-var(height, switch-ios-inner-diameter-size);
             .onepx-border-var(all, switch-ios-inner-border-color, 50%);
+            [dir="rtl"] & {
+                transform: rotate(180deg);
+            }
         }
 
         &.disabled {
@@ -127,7 +139,7 @@
 
     &-inner {
         position: relative;
-        left: 0;
+        .set-prop-with-rtl(left, 0);
         top: 0;
         display: flex;
         align-items: center;

package/umd/tabs/demo/style/css/mobile.css

@@ -43,6 +43,17 @@
           justify-content: flex-end;
   font-weight: bold;
 }
+[dir="rtl"] #demo-tabs .demo-tabs-add-extra {
+  right: initial;
+  left: 0;
+}
+[dir="rtl"] #demo-tabs .demo-tabs-add-extra {
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+          justify-content: flex-start;
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
 #demo-tabs .demo-tab-custom-bar .arco-tab-cell-container-wrap {
   height: 1.52rem;
 }

package/umd/tabs/demo/style/mobile.less

@@ -24,7 +24,7 @@
 
     .demo-tabs-add-extra {
         position: absolute;
-        right: 0;
+        .set-prop-with-rtl(right, 0);
         top: 0;
         background: linear-gradient(270deg, #fff 66.04%, rgba(255, 255, 255, 0) 105%);
         .rem(width, 64);
@@ -36,6 +36,10 @@
         align-items: center;
         justify-content: flex-end;
         font-weight: bold;
+        [dir="rtl"] & {
+            justify-content: flex-start;
+            transform: rotate(180deg);
+        }
     }
 
     .demo-tab-custom-bar {

package/umd/tabs/index.js

@@ -150,6 +150,10 @@
         tabBarStopPropagation = _props$tabBarStopProp === void 0 ? true : _props$tabBarStopProp,
         _props$swipeEnergySav = props.swipeEnergySaving,
         swipeEnergySaving = _props$swipeEnergySav === void 0 ? false : _props$swipeEnergySav;
+
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        useRtl = _useContext.useRtl;
+
     var domRef = (0, _react.useRef)(null);
     var cellRef = (0, _react.useRef)(null);
     var paneRef = (0, _react.useRef)(null);
@@ -201,6 +205,8 @@
     var allPanes = getAllPanes();
     var tabDirection = ['top', 'bottom'].indexOf(tabBarPosition) !== -1 ? 'vertical' : 'horizontal';
     var canSwipe = mode === 'swipe' && !disabled && swipeable && tabDirection === 'vertical' && tabs.length > 1;
+    var horizontalUseRtl = tabDirection === 'vertical' && useRtl;
+    var rtlRatio = horizontalUseRtl ? -1 : 1;
     (0, _react.useImperativeHandle)(ref, function () {
       return {
         dom: domRef.current,
@@ -320,6 +326,7 @@
       var posDisY = touchMoveY - touchStartYRef.current;
       var absDisX = Math.abs(posDisX);
       var absDisY = Math.abs(posDisY);
+      var comparedDis = posDisX * rtlRatio;
 
       if (scrollingRef.current === null) {
         scrollingRef.current = absDisX < absDisY;
@@ -337,10 +344,10 @@
         return;
       }
 
-      if (activeIndexRef.current === 0 && posDisX > 0 || activeIndexRef.current === tabs.length - 1 && posDisX < 0) {
+      if (activeIndexRef.current === 0 && comparedDis > 0 || activeIndexRef.current === tabs.length - 1 && comparedDis < 0) {
         if (!touchStoppedRef.current && absDisX > stopTouchThreshold) {
           touchStoppedRef.current = true;
-          onTouchStopped && onTouchStopped(posDisX >= 0 ? -1 : 1);
+          onTouchStopped && onTouchStopped(comparedDis >= 0 ? -1 : 1);
         }
 
         setDistance(0);
@@ -390,10 +397,11 @@
       var index = activeIndexRef.current;
       var needJump = Math.abs(dis) > maxSlice && Math.abs(dis) > distanceToChangeTab || Math.abs(speed) > speedToChangeTab;
       var newIndex = index;
+      var comparedDis = dis * rtlRatio;
 
-      if (dis > 0 && needJump) {
+      if (comparedDis > 0 && needJump) {
         newIndex = index - 1;
-      } else if (dis < 0 && needJump) {
+      } else if (comparedDis < 0 && needJump) {
         newIndex = index + 1;
       }
 
@@ -537,7 +545,8 @@
         tabPaneExtra: tabPaneExtra,
         autoHeight: autoHeight,
         onScroll: onScroll,
-        swipeEnergySaving: swipeEnergySaving
+        swipeEnergySaving: swipeEnergySaving,
+        rtlRatio: rtlRatio
       }, commonProps)));
     });
   });

package/umd/tabs/style/css/index.css

@@ -368,11 +368,12 @@
   -webkit-flex: 1;
           flex: 1;
 }
-.arco-tab-cell.vertical:not(.custom).line {
+.arco-tab-cell.vertical:not(.custom).line:not(.last) {
   margin-right:  0.8rem ;
 }
-.arco-tab-cell.vertical:not(.custom).line.last {
-  margin-right: 0;
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).line:not(.last) {
+  margin-right: initial;
+  margin-left:  0.8rem ;
 }
 .arco-tab-cell.vertical:not(.custom).line.active,
 .arco-tab-cell.vertical:not(.custom).line-divide.active {
@@ -407,29 +408,53 @@
 .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
   border-right: 1PX solid #165dff ;
 }
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
+  border-right: initial;
+  border-left: 1PX solid #165dff ;
+}
 .arco-tab-cell.vertical:not(.custom).card:first-of-type {
   border-top-left-radius:  2PX ;
   border-bottom-left-radius:  2PX ;
 }
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:first-of-type {
+  border-top-left-radius: initial;
+  border-top-right-radius:  2PX ;
+}
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:first-of-type {
+  border-bottom-left-radius: initial;
+  border-bottom-right-radius:  2PX ;
+}
 .arco-tab-cell.vertical:not(.custom).card:last-of-type {
   border-top-right-radius:  2PX ;
   border-bottom-right-radius:  2PX ;
 }
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:last-of-type {
+  border-top-right-radius: initial;
+  border-top-left-radius:  2PX ;
+}
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:last-of-type {
+  border-bottom-right-radius: initial;
+  border-bottom-left-radius:  2PX ;
+}
 .arco-tab-cell.vertical:not(.custom).card.android,
 .arco-tab-cell.vertical:not(.custom).tag-divide.android {
   padding-top: 0.04rem;
 }
 .arco-tab-cell.vertical:not(.custom).tag,
 .arco-tab-cell.vertical:not(.custom).tag-divide {
-  margin-right:  0.32rem ;
   padding:  0 0.32rem ;
   border-radius: 2rem;
   background:  #f7f8fA ;
   color:  #1d2129 ;
 }
-.arco-tab-cell.vertical:not(.custom).tag.last,
-.arco-tab-cell.vertical:not(.custom).tag-divide.last {
-  margin-right: 0;
+.arco-tab-cell.vertical:not(.custom).tag:not(.last),
+.arco-tab-cell.vertical:not(.custom).tag-divide:not(.last) {
+  margin-right:  0.32rem ;
+}
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).tag:not(.last),
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).tag-divide:not(.last) {
+  margin-right: initial;
+  margin-left:  0.32rem ;
 }
 .arco-tab-cell.vertical:not(.custom).tag.active,
 .arco-tab-cell.vertical:not(.custom).tag-divide.active {

package/umd/tabs/style/index.less

@@ -310,12 +310,8 @@
 
         &:not(.custom) {
 
-            &.line {
-                .use-var(margin-right, tabs-tab-bar-line-gutter);
-
-                &.last {
-                    margin-right: 0;
-                }
+            &.line:not(.last) {
+                .use-var-with-rtl(margin-right, tabs-tab-bar-line-gutter);
             }
 
             &.line,
@@ -337,17 +333,17 @@
                 }
 
                 &:not(:last-child) {
-                    .use-var(border-right, tabs-tab-bar-card-color, 1PX solid);
+                    .use-var-with-rtl(border-right, tabs-tab-bar-card-color, 1PX solid);
                 }
 
                 &:first-of-type {
-                    .use-var(border-top-left-radius, tabs-tab-bar-card-border-radius);
-                    .use-var(border-bottom-left-radius, tabs-tab-bar-card-border-radius);
+                    .use-var-with-rtl(border-top-left-radius, tabs-tab-bar-card-border-radius);
+                    .use-var-with-rtl(border-bottom-left-radius, tabs-tab-bar-card-border-radius);
                 }
 
                 &:last-of-type {
-                    .use-var(border-top-right-radius, tabs-tab-bar-card-border-radius);
-                    .use-var(border-bottom-right-radius, tabs-tab-bar-card-border-radius);
+                    .use-var-with-rtl(border-top-right-radius, tabs-tab-bar-card-border-radius);
+                    .use-var-with-rtl(border-bottom-right-radius, tabs-tab-bar-card-border-radius);
                 }
             }
 
@@ -361,14 +357,13 @@
 
             &.tag,
             &.tag-divide {
-                .use-var(margin-right, tabs-tab-bar-tag-gutter);
                 .use-var(padding, tabs-tab-bar-tag-padding);
                 .rem(border-radius, 100);
                 .use-var(background, tabs-tab-bar-tag-background);
                 .use-var(color, tabs-tab-bar-tag-text-color);
 
-                &.last {
-                    margin-right: 0;
+                &:not(.last) {
+                    .use-var-with-rtl(margin-right, tabs-tab-bar-tag-gutter);
                 }
 
                 &.active {