Merge f4fb4e0 into 354a228

README.md

@@ -149,6 +149,12 @@ navWrapper={(content) => <Sortable>{content}</Sortable>}
           <th>rc-tabs</th>
           <td>prefix class name, use to custom style</td>
       </tr>
+      <tr>
+          <td>direction</td>
+          <td>String</td>
+          <th>ltr</th>
+          <td>Layout direction of tabs component, it supports RTL direction too.</td>
+      </tr>
     </tbody>
 </table>
 
@@ -258,6 +264,12 @@ tab bar with ink indicator, in addition to tab bar props, extra props:
           <th></th>
           <td>can set inkBar style</td>
       </tr>
+      <tr>
+          <td>direction</td>
+          <td>String</td>
+          <th>ltr</th>
+          <td>Layout direction of InkTabBar, set it to `rtl` in right-to-left direciton</td>
+      </tr>
     </tbody>
 </table>
 
@@ -299,6 +311,12 @@ scrollable tab bar, in addition to tab bar props, extra props:
           <th></th>
           <td>specific the next icon</td>
       </tr>
+      <tr>
+          <td>direction</td>
+          <td>String</td>
+          <th>ltr</th>
+          <td>Layout direction of InkTabBar, set it to `rtl` in right-to-left direciton</td>
+      </tr>
     </tbody>
 </table>
 
@@ -375,6 +393,12 @@ swipeable tab bar with ink indicator, same with tab bar/ink bar props, and below
           <td>false</td>
           <td>whether animate tabpane with css margin</td>
       </tr>
+      <tr>
+          <td>direction</td>
+          <td>String</td>
+          <th>ltr</th>
+          <td>Layout direction of InkTabBar, set it to `rtl` in right-to-left direciton</td>
+      </tr>
     </tbody>
 </table>
 
@@ -398,6 +422,12 @@ swipeable tab panes, in addition to lib/TabContent props, extra props:
           <td></td>
           <td>options for react-hammerjs</td>
       </tr>
+      <tr>
+          <td>direction</td>
+          <td>String</td>
+          <th>ltr</th>
+          <td>Layout direction of InkTabBar, set it to `rtl` in right-to-left direciton</td>
+      </tr>
     </tbody>
 </table>
 

assets/index/bottom.less

@@ -56,12 +56,23 @@
     }
   }
 
+  &-bottom.rtl &-tab-next {
+    left: 2px;
+    right:auto;
+  }
+
   &-bottom &-tab-prev {
     left: 0;
     &-icon:before {
       content: "<";
     }
   }
+
+  &-bottom.rtl &-tab-prev {
+    right: 0;
+    left:auto;
+  }
+
 
   &-bottom &-tab-prev, &-bottom &-tab-next {
     margin-right: -2px;
@@ -77,12 +88,22 @@
     left: 0;
   }
 
+  &-bottom.rtl &-ink-bar {
+    right: 0;
+    left:auto;
+  }
+
   &-bottom &-tab {
     float: left;
     height: 100%;
     margin-right: 30px;
   }
 
+  &-bottom.rtl &-tab {
+    float: right;
+    margin-left: 30px;
+    margin-right: 0;
+  }
   &-bottom &-tabpane-inactive {
     height: 0;
     overflow: visible;

assets/index/common.less

@@ -83,7 +83,6 @@
     list-style: none;
     display: inline-block;
     transform-origin: 0 0;
-
     &-animated {
       transition: transform 0.5s @easing-in-out;
     }
@@ -97,6 +96,10 @@
       clear: both;
     }
   }
+
+  &.rtl &-nav {
+    float: right;
+  }
 
   &-tab {
     box-sizing: border-box;
@@ -159,4 +162,7 @@
   &-content-no-animated &-tabpane-inactive {
     display: none;
   }
+  &.rtl{
+    direction: rtl;
+  }
 }

assets/index/top.less

@@ -56,13 +56,23 @@
     }
   }
 
+  &-top.rtl &-tab-next {
+    left: 2px;
+    right:auto;
+  }
+
   &-top &-tab-prev {
     left: 0;
     &-icon:before {
       content: "<";
     }
   }
 
+  &-top.rtl &-tab-prev {
+    right: 0;
+    left:auto;
+  }
+
   &-top &-tab-prev, &-top &-tab-next {
     margin-right: -2px;
     width: 0;
@@ -85,12 +95,23 @@
     left: 0;
   }
 
+  &-top.rtl &-ink-bar {
+    right: 0;
+    left:auto;
+  }
+
   &-top &-tab {
     float: left;
     height: 100%;
     margin-right: 30px;
   }
 
+  &-top.rtl &-tab {
+    float: right;
+    margin-left: 30px;
+    margin-right: 0;
+  }
+
   &-top &-tabpane-inactive {
     height: 0;
     overflow: visible;

examples/rtl.html

@@ -0,0 +1 @@
+placeholder