tabs translation, ref ant-design#329 (ant-design#1527)

* docs: tabs translation, ref ant-design#329

* fix typo

components/tabs/__tests__/__snapshots__/demo.test.web.js.snap

@@ -19,23 +19,23 @@ exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
         class=" am-tabs-tab"
         role="tab"
       >
-        选项卡一
+        First Tab
       </div>
       <div
         aria-disabled="false"
         aria-selected="true"
         class="am-tabs-tab-active am-tabs-tab"
         role="tab"
       >
-        选项卡二
+        Second Tab
       </div>
       <div
         aria-disabled="false"
         aria-selected="false"
         class=" am-tabs-tab"
         role="tab"
       >
-        选项卡三
+        Third Tab
       </div>
     </div>
     <div
@@ -55,7 +55,7 @@ exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
         <div
           style="display:flex;align-items:center;justify-content:center;height:5rem;background-color:#fff;"
         >
-          选项卡二内容
+          Content of Second Tab
         </div>
       </div>
       <div
@@ -103,7 +103,7 @@ exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%;"
               >
-                选项0
+                Option0
               </div>
               <div
                 aria-disabled="false"
@@ -112,7 +112,7 @@ exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%;"
               >
-                选项1
+                Option1
               </div>
               <div
                 aria-disabled="false"
@@ -121,7 +121,7 @@ exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%;"
               >
-                选项2
+                Option2
               </div>
               <div
                 aria-disabled="false"
@@ -130,7 +130,7 @@ exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%;"
               >
-                选项3
+                Option3
               </div>
               <div
                 aria-disabled="false"
@@ -139,7 +139,7 @@ exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%;"
               >
-                选项4
+                Option4
               </div>
               <div
                 aria-disabled="false"
@@ -148,7 +148,7 @@ exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%;"
               >
-                选项5
+                Option5
               </div>
               <div
                 aria-disabled="false"
@@ -157,7 +157,7 @@ exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%;"
               >
-                选项6
+                Option6
               </div>
               <div
                 aria-disabled="false"
@@ -166,7 +166,7 @@ exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%;"
               >
-                选项7
+                Option7
               </div>
               <div
                 aria-disabled="false"
@@ -175,7 +175,7 @@ exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%;"
               >
-                选项8
+                Option8
               </div>
               <div
                 aria-disabled="false"
@@ -184,7 +184,7 @@ exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%;"
               >
-                选项9
+                Option9
               </div>
               <div
                 aria-disabled="false"
@@ -193,7 +193,7 @@ exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%;"
               >
-                选项10
+                Option10
               </div>
               <div
                 aria-disabled="false"
@@ -202,7 +202,7 @@ exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%;"
               >
-                选项11
+                Option11
               </div>
             </div>
           </div>
@@ -261,7 +261,7 @@ exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
         <div
           style="display:flex;align-items:center;justify-content:center;height:5rem;background-color:#fff;"
         >
-          选项8内容
+          content of option8
         </div>
       </div>
       <div
@@ -309,23 +309,23 @@ exports[`renders ./components/tabs/demo/noanim.md correctly 1`] = `
         class=" am-tabs-tab"
         role="tab"
       >
-        选项卡一
+        First tab
       </div>
       <div
         aria-disabled="false"
         aria-selected="false"
         class=" am-tabs-tab"
         role="tab"
       >
-        选项卡二
+        Second Tab
       </div>
       <div
         aria-disabled="false"
         aria-selected="true"
         class="am-tabs-tab-active am-tabs-tab"
         role="tab"
       >
-        选项卡三
+        Third Tab
       </div>
     </div>
     <div
@@ -349,7 +349,7 @@ exports[`renders ./components/tabs/demo/noanim.md correctly 1`] = `
         <div
           style="display:flex;align-items:center;justify-content:center;height:5rem;background-color:#fff;"
         >
-          选项卡三内容
+          Content of Third Tab
         </div>
       </div>
     </div>

components/tabs/demo/basic.md

@@ -1,11 +1,11 @@
 ---
 order: 0
 title:
-  zh-CN: 选项卡
-  en-US: Tabs
+  zh-CN: 基本用法
+  en-US: Basic Usage
 ---
 
-多用于页面的内容区块，起着控制小范围内的大块内容的分组和隐藏，起着保持界面整洁的作用。
+Basic Usage.
 
 
 ````jsx
@@ -22,19 +22,19 @@ function handleTabClick(key) {
 const TabExample = () => (
   <div>
     <Tabs defaultActiveKey="2" onChange={callback} onTabClick={handleTabClick}>
-      <TabPane tab="选项卡一" key="1">
+      <TabPane tab="First Tab" key="1">
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
-          选项卡一内容
+          Content of First Tab
         </div>
       </TabPane>
-      <TabPane tab="选项卡二" key="2">
+      <TabPane tab="Second Tab" key="2">
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
-          选项卡二内容
+          Content of Second Tab
         </div>
       </TabPane>
-      <TabPane tab="选项卡三" key="3">
+      <TabPane tab="Third Tab" key="3">
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
-          选项卡三内容
+          Content of Third Tab
         </div>
       </TabPane>
     </Tabs>

components/tabs/demo/mutlitabs.md

@@ -5,7 +5,7 @@ title:
   en-US: 'overflow, more than 5 tabs'
 ---
 
-可视区最多显示5个标签，点击两侧的标签后，滑动tabs
+There are at most 5 tab panes in the visible area, click on the both sides of `Tabs` to scroll.
 
 
 ````jsx
@@ -20,9 +20,9 @@ function handleTabClick(key) {
   console.log('onTabClick', key);
 }
 const makeTabPane = key => (
-  <TabPane tab={`选项${key}`} key={key}>
+  <TabPane tab={`Option${key}`} key={key}>
     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
-      {`选项${key}内容`}
+      {`content of option${key}`}
     </div>
   </TabPane>
 );

components/tabs/demo/noanim.md

@@ -5,7 +5,7 @@ title:
   en-US: 'No animation'
 ---
 
-禁用切换动画效果
+Switch tabs without animation
 
 ````jsx
 import { Tabs, WhiteSpace } from 'antd-mobile';
@@ -23,19 +23,19 @@ const TabExample = () => (
   <div>
     <WhiteSpace />
     <Tabs defaultActiveKey="3" animated={false} onChange={callback} onTabClick={handleTabClick}>
-      <TabPane tab="选项卡一" key="1">
+      <TabPane tab="First tab" key="1">
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
-           选项卡一内容
+           Content of First Tab
         </div>
       </TabPane>
-      <TabPane tab="选项卡二" key="2">
+      <TabPane tab="Second Tab" key="2">
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
-           选项卡二内容
+           Content of Second Tab
         </div>
       </TabPane>
-      <TabPane tab="选项卡三" key="3">
+      <TabPane tab="Third Tab" key="3">
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
-           选项卡三内容
+           Content of Third Tab
         </div>
       </TabPane>
     </Tabs>

components/tabs/index.en-US.md

@@ -5,11 +5,12 @@ title: Tabs
 ---
 
 
-用于让用户在不同的视图中进行切换。
+A `Tabs` is used to allow users to switch between different views.
 
-### 规则
-- 标签数量，一般 2-4 个；其中，标签中的文案需要精简，一般 2-4 个字。
-- 在 iOS 端的次级页面中，不建议使用左右滑动来切换 Tab，这个和 iOS 的左滑返回存在冲突，eg：详情页中 Tabs。
+### Rule
+
+- Generally a `Tabs` should have 2-4 tab pane, the title of each tab pane should be concise，normally has 2-4 words..
+- In the secondary page of iOS, it is not recommended to use left and right swipe to switch tab, which conflicts with back swipe gestrue in iOS. eg:  tabs in details page.
 
 
 ## API
@@ -20,29 +21,29 @@ Support WEB, React-Native.
 
 Properties | Descrition | Type | Default
 -----------|------------|------|--------
-| activeKey        | 当前激活 tab 面板的 key                      | String   | 无            |
-| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | String   | 第一个面板    |
-| onChange         | 切换面板的回调                        | (key: string): void | 无            |
-| onTabClick       | tab 被点击的回调                      | (key: string): void | 无            |
-| animated |  是否动画    |  boolean   |    `true`    |
-| swipeable |  是否可以滑动 tab 内容进行切换    |  boolean   |    `true`    |
-| hammerOptions(`Web Only`) |  开启`swipeable`的时候可以对 [hammerjs](http://hammerjs.github.io/) 的 [pan](http://hammerjs.github.io/recognizer-pan/) 和 [swipe](http://hammerjs.github.io/recognizer-swipe/) 两种手势进行参数配置    |  object   |    {}   |
-| tabBarPosition |    tab 位置 top/bottom        |  string    |    `top`        |
-| destroyInactiveTabPane | 是否销毁掉不活动的 tabPane (优化使用) |  boolean    |    false   |
-| underlineColor(`react-native only`) |   线条颜色       |  string    |    `#ddd`        |
-| activeUnderlineColor(`react-native only`) |   选中线条颜色       |  string    |    `#108ee9`        |
-| textColor(`react-native only`) |   文字颜色       |  string    |    `#000`        |
-| activeTextColor(`react-native only`) |   选中文字颜色       |  string    |    `#108ee9`        |
-| barStyle(`react-native only`) |   style for tabs bar       |  object    |    `{}`        |
-| prefixCls(`web only`) |  className 前缀      |  string    |    `am-tabs`        |
-| className(`web only`) |   额外的 className      |  string    |    无        |
-| pageSize(`web only`) |  可视区显示的 tab 数量，可以看做一页     |  number    |    5       |
-| speed(`web only`) |   多页模式下，TabBar 滑动的速度      |  Number: 1 ~ 10    |    8        |
-| tabBarhammerOptions(`web only`) |   同hammerOptions，对 TabBar 的滑动手势进行配置      |  Obejct    |    {}        |
+| activeKey        | Current TabPane's key                      | String   | 无            |
+| defaultActiveKey | Default actived tabPanel's key, if activeKey is not set. | String   | first pane    |
+| onChange         | Callback when tab is switched                        | (key: string): void | 无            |
+| onTabClick       | Callback when tab is clicked                      | (key: string): void | 无            |
+| animated |  Whether to change tabs with animation,    |  boolean   |    `true`    |
+| swipeable | Whether to switch tabs with swipe gestrue in the content   |  boolean   |    `true`    |
+| hammerOptions(`Web Only`) |  The options of [pan](http://hammerjs.github.io/recognizer-pan/) and [swipe](http://hammerjs.github.io/recognizer-swipe/) gestrue in [hammerjs](http://hammerjs.github.io/) can be customized if `swipeable` is `true`    |  object   |    {}   |
+| tabBarPosition |    Position of tabs. Options: top and bottom       |  string    |    `top`        |
+| destroyInactiveTabPane | Whether to destroy the inactive tabPane (for optimization) |  boolean    |    false   |
+| underlineColor(`react-native only`) |   Underline color of `Tabs`    |  string    |    `#ddd`        |
+| activeUnderlineColor(`react-native only`) | Underline color of active tabPane   |  string    |    `#108ee9`        |
+| textColor(`react-native only`) |  color of text      |  string    |    `#000`        |
+| activeTextColor(`react-native only`) | color of text for active tabPanel       |  string    |    `#108ee9`        |
+| barStyle(`react-native only`) |   style for tab's bar       |  object    |    `{}`        |
+| prefixCls(`web only`) |  prefix className    |  string    |    `am-tabs`        |
+| className(`web only`) |  className  for `Tabs`    |  string    |    无        |
+| pageSize(`web only`) |  The number of tab panes in the visible area, it can be seen as one page     |  number    |    5       |
+| speed(`web only`) |   The scroll speed of `TabBar` in multiple page mode       |  Number: 1 ~ 10    |    8        |
+| tabBarhammerOptions(`web only`) | same as `hammerOptions` which is used to custom swipe gestrue of `TabBar`|  Obejct  |  {}   |
 
 ### Tabs.TabPane
 
 Properties | Descrition | Type | Default
 -----------|------------|------|--------
-| key  | 对应 activeKey   | String                  | 无     |
-| tab  | 选项卡头显示文字 | React.Element or String | 无     |
+| key  | TabPane's key   | String                  |      |
+| tab  | Show text in TabPane's head | React.Element or String |      |