segmented-control translation, ref ant-design#329 (ant-design#1441)

* segmented-control translation, ref ant-design#329
lixiaoyang1992 · Apr 26, 2018 · 7cb1ee1 · 7cb1ee1
1 parent 88c3c72
commit 7cb1ee1
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 35 deletions.
diff --git a/components/segmented-control/__tests__/__snapshots__/demo.test.js.snap b/components/segmented-control/__tests__/__snapshots__/demo.test.js.snap
@@ -14,7 +14,7 @@ exports[`renders ./components/segmented-control/demo/basic.tsx correctly 1`] = `
     allowFontScaling={true}
     ellipsizeMode="tail"
   >
-    禁用/disabled
+    Disabled
   </Text>
   <RCTSegmentedControl
     enabled={false}
@@ -51,7 +51,7 @@ exports[`renders ./components/segmented-control/demo/basic.tsx correctly 1`] = `
     allowFontScaling={true}
     ellipsizeMode="tail"
   >
-    设置 tintColor, style
+    TintColor and Style
   </Text>
   <RCTSegmentedControl
     enabled={true}
@@ -92,7 +92,7 @@ exports[`renders ./components/segmented-control/demo/basic.tsx correctly 1`] = `
     allowFontScaling={true}
     ellipsizeMode="tail"
   >
-    设置默认选中 selectedIndex
+    SelectedIndex
   </Text>
   <RCTSegmentedControl
     enabled={true}
@@ -130,7 +130,7 @@ exports[`renders ./components/segmented-control/demo/basic.tsx correctly 1`] = `
     allowFontScaling={true}
     ellipsizeMode="tail"
   >
-    事件 onChange/onValueChange
+    onChange/onValueChange
   </Text>
   <RCTSegmentedControl
     enabled={true}

diff --git a/components/segmented-control/__tests__/__snapshots__/demo.test.web.js.snap b/components/segmented-control/__tests__/__snapshots__/demo.test.web.js.snap
@@ -7,7 +7,7 @@ exports[`renders ./components/segmented-control/demo/basic.md correctly 1`] = `
   <p
     class="sub-title"
   >
-    最简
+    Simplest
   </p>
   <div
     class="am-segment"
@@ -41,7 +41,7 @@ exports[`renders ./components/segmented-control/demo/basic.md correctly 1`] = `
   <p
     class="sub-title"
   >
-    禁用
+    Disabled
   </p>
   <div
     class="am-segment am-segment-disabled"
@@ -75,7 +75,7 @@ exports[`renders ./components/segmented-control/demo/basic.md correctly 1`] = `
   <p
     class="sub-title"
   >
-    默认选中一项
+    SelectedIndex
   </p>
   <div
     class="am-segment"
@@ -121,7 +121,7 @@ exports[`renders ./components/segmented-control/demo/basic.md correctly 1`] = `
   <p
     class="sub-title"
   >
-    主色调样式 tintColor
+    TintColor
   </p>
   <div
     class="am-segment"
@@ -168,7 +168,7 @@ exports[`renders ./components/segmented-control/demo/basic.md correctly 1`] = `
   <p
     class="sub-title"
   >
-    事件
+    onChange/onValueChange
   </p>
   <div
     class="am-segment"

diff --git a/components/segmented-control/demo/basic.md b/components/segmented-control/demo/basic.md
@@ -18,23 +18,23 @@ class SegmentedControlExample extends React.Component {
   render() {
     return (
       <WingBlank size="lg" className="sc-example">
-        <p className="sub-title">最简</p>
+        <p className="sub-title">Simplest</p>
         <SegmentedControl values={['切换一', '切换二']} />
 
-        <p className="sub-title">禁用</p>
+        <p className="sub-title">Disabled</p>
         <SegmentedControl values={['切换一', '切换二']} disabled />
 
-        <p className="sub-title">默认选中一项</p>
+        <p className="sub-title">SelectedIndex</p>
         <SegmentedControl selectedIndex={1} values={['切换一', '切换二', '切换三']} />
 
-        <p className="sub-title">主色调样式 tintColor</p>
+        <p className="sub-title">TintColor</p>
         <SegmentedControl
           values={['切换一', '切换二', '切换三']}
           tintColor={'#ff0000'}
           style={{ height: '0.8rem', width: '5rem' }}
         />
 
-        <p className="sub-title">事件</p>
+        <p className="sub-title">onChange/onValueChange</p>
         <SegmentedControl
           values={['切换一', '切换二', '切换三']}
           onChange={this.onChange}

diff --git a/components/segmented-control/demo/basic.tsx b/components/segmented-control/demo/basic.tsx
@@ -15,26 +15,26 @@ export default class BasicTagExample extends React.Component<any, any> {
   render() {
     return (
       <View style={{ paddingTop: 60, paddingHorizontal: 20 }}>
-        <Text>禁用/disabled</Text>
+        <Text>Disabled</Text>
         <SegmentedControl
           values={['切换一', '切换二']}
           disabled
         />
         <WhiteSpace size="lg" />
-        <Text>设置 tintColor, style</Text>
+        <Text>TintColor and Style</Text>
         <SegmentedControl
           values={['切换一', '切换二', '切换三']}
           tintColor={'#ff0000'}
           style={{ height: 40, width: 280 }}
         />
         <WhiteSpace size="lg" />
-        <Text>设置默认选中 selectedIndex</Text>
+        <Text>SelectedIndex</Text>
         <SegmentedControl
           selectedIndex={1}
           values={['切换一', '切换二', '切换三']}
         />
         <WhiteSpace size="lg" />
-        <Text>事件 onChange/onValueChange</Text>
+        <Text>onChange/onValueChange</Text>
         <SegmentedControl
           values={['切换一', '切换二', '切换三']}
           onChange={this.onChange}

diff --git a/components/segmented-control/index.en-US.md b/components/segmented-control/index.en-US.md
@@ -4,14 +4,13 @@ type: Navigation
 title: SegmentedControl
 ---
 
+`SegmentedControl` includes at least two segments, it is used to display diffrent views and recommended by `iOS`.
 
-由至少 2 个分段控件组成，用作显示不同视图的显示；是 iOS 的推荐组件。
-
-### 规则
-- 和 Tabs 功能相似，尽可能避免一个页面中同时出现这两个组件。
-- 可以搭配 NavBar 一起使用，用于显示多个视图，分段数一般为 2 个。
-- 单独放置一行时，分段数最多为 5 个；文案需要精简，一般 2-4 个字。
-- 尽可能保持文案长度一致。
+### Rule
+- It is similar to the functionality used for `Tabs`, so avoid to use them at same page as much as possible.
+- You can use `SegmentedControl` with `NavBar` to display mutiple views.
+- Generally there should be no more than 5 segments in one line, each segment has 2-4 words and needs simplified texts.
+- Keep the length of the text consistent as much as possible.
 
 
 ## API
@@ -20,12 +19,12 @@ Support WEB, React-Native.
 
 Properties | Descrition | Type | Default
 -----------|------------|------|--------
-| prefixCls(`web only`)  | 样式前缀        | String |  `am-segment`  |
-| className(`web only`) | 样式类        | String |    |
-| style | 自定义样式        | Object | `{}`   |
-| tintColor  | 组件主色调        | String |  `#2DB7F5`  |
-| disabled  | 是否启用        | Boolean |  false  |
-| selectedIndex  | 选中项在数组中的索引        | Number |  0  |
-| values  | 选项数组,值是字符串        | array |  []  |
-| onChange    |    回调函数     | (e): void |  function(){}  |
-| onValueChange    |    回调函数   | (val): void |  function(){}  |
+| prefixCls(`web only`)  | prefix class        | String |  `am-segment`  |
+| className(`web only`) | class name of component        | String |    |
+| style | style of component        | Object | `{}`   |
+| tintColor  | accent color of the control       | String |  `#2DB7F5`  |
+| disabled  | whether the user is able to interact with the control  | Boolean |  false  |
+| selectedIndex  | the index in `props.values` of the segment to be (pre)selected | Number |  0  |
+| values  | The labels for the control's segment buttons, in order  | array |  []  |
+| onChange    |  callback that is called when the user taps a segment; passes the event object as an argument | (e): void |  function(){}  |
+| onValueChange    |  callback that is called when the user taps a segment; passes the segment's value as an argument | (val): void |  function(){}  |
diff --git a/components/segmented-control/index.zh-CN.md b/components/segmented-control/index.zh-CN.md
@@ -6,7 +6,7 @@ subtitle: 分段器
 ---
 
 
-由至少 2 个分段控件组成，用作显示不同视图的显示；是 iOS 的推荐组件。
+由至少 2 个分段控件组成，用作不同视图的显示；是 iOS 的推荐组件。
 
 ### 规则
 - 和 Tabs 功能相似，尽可能避免一个页面中同时出现这两个组件。