jdf2e · oasis-cloud · Feb 1, 2024 · Nov 9, 2023 · Nov 13, 2023 · Nov 14, 2023
diff --git a/src/packages/audio/audio.scss b/src/packages/audio/audio.scss
@@ -97,6 +97,7 @@
         left: auto;
         right: 50%;
         transform: rotate(-45deg);
+        transform-origin: 20px -18px;
       }
     }
   }

diff --git a/src/packages/avatar/demo.scss b/src/packages/avatar/demo.scss
@@ -11,3 +11,13 @@
 .demo-avatar {
   color: #fff;
 }
+
+[dir='rtl'] .avatar-demo,
+.nut-rtl .avatar-demo {
+  .nut-cell {
+    & > div {
+      margin-right: 0px;
+      margin-left: 30px;
+    }
+  }
+}
diff --git a/src/packages/avatarcropper/demo.taro.tsx b/src/packages/avatarcropper/demo.taro.tsx
@@ -43,11 +43,7 @@ const AvatarCropperDemo = () => {
   return (
     <>
       <Header />
-      <div
-        className={`demo ${
-          Taro.getEnv() === 'WEB' ? 'web' : ''
-        } full avatar-demo`}
-      >
+      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''} full`}>
         <h2>{translated.c0a1c0a1}</h2>
         <Cell>
           <AvatarCropper onConfirm={cutImage}>

diff --git a/src/packages/avatarcropper/demo.tsx b/src/packages/avatarcropper/demo.tsx
@@ -36,7 +36,7 @@ const AvatarCropperDemo = () => {
   }
   return (
     <>
-      <div className="demo full avatar-demo">
+      <div className="demo full">
         <h2>{translated.c0a1c0a1}</h2>
         <Cell>
           <AvatarCropper onConfirm={cutImage}>

diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
@@ -335,7 +335,6 @@
     margin-right: $button-text-icon-margin;
 
     &.right {
-      margin-right: 0;
       margin-left: $button-text-icon-margin;
     }
   }

diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss
@@ -118,6 +118,12 @@
         margin-right: 0;
         margin-left: 8px;
       }
+
+      .nut-icon-ArrowLeft,
+      .nut-icon-ArrowRight,
+      svg {
+        transform: rotate(180deg);
+      }
     }
   }
 

diff --git a/src/packages/cell/demo.taro.tsx b/src/packages/cell/demo.taro.tsx
@@ -35,7 +35,7 @@ const CellDemo = () => {
       title: '我是标题',
       title1: '我是描述',
       title2: '点击测试',
-      title3: '圆角设置 0',
+      title3: '圆角设置为0',
       title4: '链接 | 分组用法',
       title5: '垂直居中',
       title6: '自定义标题区域',
@@ -54,7 +54,7 @@ const CellDemo = () => {
       title: '我是標題',
       title1: '我是描述',
       title2: '點擊測試',
-      title3: '圓角設置 0',
+      title3: '圓角設置為0',
       title4: '鏈接 | 分組用法',
       title5: '垂直居中',
       title6: '自定義標題區域',

diff --git a/src/packages/cell/demo.tsx b/src/packages/cell/demo.tsx
@@ -36,7 +36,7 @@ const CellDemo = () => {
       title: '我是标题',
       title1: '我是描述',
       title2: '点击测试',
-      title3: '圆角设置 0',
+      title3: '圆角设置为0',
       title4: '链接 | 分组用法',
       title5: '垂直居中',
       title6: '自定义标题区域',
@@ -55,7 +55,7 @@ const CellDemo = () => {
       title: '我是標題',
       title1: '我是描述',
       title2: '點擊測試',
-      title3: '圓角設置 0',
+      title3: '圓角設置為0',
       title4: '鏈接 | 分組用法',
       title5: '垂直居中',
       title6: '自定義標題區域',

diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss
@@ -125,6 +125,8 @@
 
       .nut-icon {
         transform: rotate(180deg);
+        margin-right: 0px;
+        margin-left: 5px;
       }
     }
 
@@ -160,8 +162,9 @@
     border-radius: 0px 45px 45px 0px;
 
     .nut-icon {
-      margin-right: 0;
+      margin-right: 0px;
       margin-left: 5px;
+      transform: rotate(180deg);
     }
   }
 
@@ -195,7 +198,9 @@
       border-radius: 45px 0 0 45px;
 
       .nut-icon {
-        transform: rotate(-180deg);
+        transform: rotate(0deg);
+        margin-right: 5px;
+        margin-left: 0px;
       }
     }
 

diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss
@@ -143,6 +143,9 @@
   &-left {
     left: auto;
     right: 0;
+    .nut-icon-ArrowLeft {
+      transform: rotate(180deg);
+    }
 
     &-back {
       margin-right: 0;
@@ -154,7 +157,7 @@
     right: auto;
     left: 0;
 
-    .nut-icon {
+    .nut-icon-ArrowLeft {
       margin-left: 0;
       margin-right: 12px;
 
@@ -167,7 +170,7 @@
 
   &-title-align-left {
     .nut-navbar-left {
-      .nut-icon {
+      .nut-icon-ArrowLeft {
         margin-left: 0;
         margin-right: 12px;
 

diff --git a/src/packages/pagination/pagination.scss b/src/packages/pagination/pagination.scss
@@ -91,6 +91,13 @@
     border-left: none;
   }
 
+  &-prev,
+  &-next {
+    .nut-icon {
+      transform: rotate(180deg);
+    }
+  }
+
   .simple-border {
     border-right: none;
     border-left: $pagination-item-border-width solid

diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx
@@ -104,14 +104,13 @@ export const Popover: FunctionComponent<
   const [showPopup, setShowPopup] = useState(false)
   const [elWidth, setElWidth] = useState(0)
   const [elHeight, setElHeight] = useState(0)
-  const [rootPosition, setRootPosition] =
-    useState<{
-      width: number
-      height: number
-      left: number
-      top: number
-      right: number
-    }>()
+  const [rootPosition, setRootPosition] = useState<{
+    width: number
+    height: number
+    left: number
+    top: number
+    right: number
+  }>()
 
   useEffect(() => {
     setShowPopup(visible)

diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss
@@ -342,6 +342,10 @@
         left: $popup-title-padding;
       }
     }
+
+    .nut-icon-ArrowLeft {
+      transform: rotate(180deg);
+    }
   }
 
   &-center {

diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss
@@ -130,6 +130,9 @@
     & > svg {
       margin-right: 0;
       margin-left: $searchbar-gap;
+      &.nut-icon {
+        transform: rotate(180deg);
+      }
 
       &:last-child {
         margin-right: 0;

diff --git a/src/packages/swiper/demo.scss b/src/packages/swiper/demo.scss
@@ -74,3 +74,10 @@
 .swiper-demo-size {
   margin: 0 auto;
 }
+
+[dir='rtl'] .nut-swiper-btns,
+.nut-rtl .nut-swiper-btns {
+  .nut-icon {
+    transform: rotate(180deg);
+  }
+}
diff --git a/src/sites/mobile/App.scss b/src/sites/mobile/App.scss
@@ -115,3 +115,24 @@ body {
 .nut-theme-dark .demo {
   background: #000 !important;
 }
+
+[dir='rtl'] #app,
+.nut-rtl #app {
+  #nav {
+    .back {
+      right: 0;
+    }
+    .translate {
+      left: 0;
+      right: auto;
+    }
+    .nut-icon {
+      transform: rotate(180deg);
+    }
+    .dark-model {
+      transform: rotate(-270deg);
+      margin-right: 0;
+      margin-left: 10px;
+    }
+  }
+}
diff --git a/src/sites/mobile/App.tsx b/src/sites/mobile/App.tsx
@@ -128,7 +128,7 @@ const WithNavRouter = ({ C }: any) => {
             onClick={() => handleSwitchDarkModel()}
           />
           <img
-            className={'dark-model'}
+            className={'translate-icon'}
             src="https://img14.360buyimg.com/imagetools/jfs/t1/135168/8/21387/6193/625fa81aEe07cc347/55ad5bc2580c53a6.png"
             alt=""
             onClick={() => handleSwitchLocale()}

diff --git a/src/sites/mobile/Links.scss b/src/sites/mobile/Links.scss
@@ -68,3 +68,18 @@
     }
   }
 }
+
+[dir='rtl'] .index,
+.nut-rtl .index {
+  &-header {
+    > img {
+      margin-right: 0;
+      margin-left: 18px;
+    }
+  }
+  &-components {
+    .nut-icon {
+      transform: rotate(180deg);
+    }
+  }
+}