diff --git a/components/transfer/demo/advanced.md b/components/transfer/demo/advanced.md
index c6ecf0f355..ef62299202 100644
--- a/components/transfer/demo/advanced.md
+++ b/components/transfer/demo/advanced.md
@@ -1,10 +1,18 @@
---
order: 2
-title: 高级用法
+title:
+ zh-CN: 高级用法
+ en-US: Advanced
---
+## zh-CN
+
穿梭框高级用法,可配置操作文案,可定制宽高,可对底部进行自定义渲染。
+## en-US
+
+The advanced usage of Transfer, you can config the operation text, custom the width and height, and render the footer in a custom way.
+
````jsx
import { Transfer, Button } from 'antd';
@@ -24,8 +32,8 @@ const App = React.createClass({
for (let i = 0; i < 20; i++) {
const data = {
key: i,
- title: `内容${i + 1}`,
- description: `内容${i + 1}的描述`,
+ title: `content${i + 1}`,
+ description: `description of content${i + 1}`,
chosen: Math.random() * 2 > 1,
};
if (data.chosen) {
@@ -43,7 +51,7 @@ const App = React.createClass({
);
},
@@ -56,7 +64,7 @@ const App = React.createClass({
width: 250,
height: 300,
}}
- operations={['向右操作文案', '向左操作文案']}
+ operations={['to right', 'to left']}
targetKeys={this.state.targetKeys}
onChange={this.handleChange}
render={item => `${item.title}-${item.description}`}
diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md
index 18851ff522..4edb2e04ce 100644
--- a/components/transfer/demo/basic.md
+++ b/components/transfer/demo/basic.md
@@ -1,10 +1,18 @@
---
order: 0
-title: 基本用法
+title:
+ zh-CN: 基本用法
+ en-US: Basic
---
+## zh-CN
+
最基本的用法。
+## en-US
+
+The most basic usage.
+
````jsx
import { Transfer } from 'antd';
@@ -24,8 +32,8 @@ const App = React.createClass({
for (let i = 0; i < 20; i++) {
const data = {
key: i,
- title: `内容${i + 1}`,
- description: `内容${i + 1}的描述`,
+ title: `content${i + 1}`,
+ description: `description of content${i + 1}`,
chosen: Math.random() * 2 > 1,
};
if (data.chosen) {
diff --git a/components/transfer/demo/custom-item.md b/components/transfer/demo/custom-item.md
index cb03427c54..389f3534f1 100644
--- a/components/transfer/demo/custom-item.md
+++ b/components/transfer/demo/custom-item.md
@@ -1,10 +1,18 @@
---
order: 3
-title: 自定义渲染行数据
+title:
+ zh-CN: 自定义渲染行数据
+ en-US: Custom datasource
---
+## zh-CN
+
自定义渲染每一个 Transfer Item,可用于渲染复杂数据。
+## en-US
+
+Custom each Transfer Item, and in this way you can render a complex datasource.
+
````jsx
import { Transfer, Icon } from 'antd';
@@ -24,8 +32,8 @@ const App = React.createClass({
for (let i = 0; i < 20; i++) {
const data = {
key: i,
- title: `内容${i + 1}`,
- description: `内容${i + 1}的描述`,
+ title: `content${i + 1}`,
+ description: `description of content${i + 1}`,
chosen: Math.random() * 2 > 1,
};
if (data.chosen) {
diff --git a/components/transfer/demo/search.md b/components/transfer/demo/search.md
index e65385839f..306b760dcb 100644
--- a/components/transfer/demo/search.md
+++ b/components/transfer/demo/search.md
@@ -1,10 +1,18 @@
---
order: 1
-title: 带搜索框
+title:
+ zh-CN: 带搜索框
+ en-US: Search
---
+## zh-CN
+
带搜索框的穿梭框。
+## en-US
+
+Transfer with a search box
+
````jsx
import { Transfer } from 'antd';
@@ -24,8 +32,8 @@ const App = React.createClass({
for (let i = 0; i < 20; i++) {
const data = {
key: i,
- title: `内容${i + 1}`,
- description: `内容${i + 1}的描述`,
+ title: `content${i + 1}`,
+ description: `description of content${i + 1}`,
chosen: Math.random() * 2 > 1,
};
if (data.chosen) {
diff --git a/components/transfer/index.en-US.md b/components/transfer/index.en-US.md
new file mode 100644
index 0000000000..5698251588
--- /dev/null
+++ b/components/transfer/index.en-US.md
@@ -0,0 +1,41 @@
+---
+category: Components
+type: Form Controls
+cols: 1
+title: Transfer
+---
+
+Double column transfer choice box.
+
+## When To Use
+
+Move the elements between two columns in an intuitive way to make a choice.
+
+## API
+
+
+| Property | Description | Type | Default |
+|-----------|------------------------------------------|------------|--------|
+| dataSource | to set data | Array | [] |
+| render | the function to draw a record line| Function(record) | |
+| targetKeys | a set of keys of the right box | Array | [] |
+| onChange | a callback function, can be executed when the choice is changing | Function(targetKeys, direction, moveKeys) | |
+| listStyle | custom style of the two transfer boxes | Object | |
+| className | custom class | String | |
+| titles | a set of titles that is sorted from left to right| Array | ['source list', 'target list'] |
+| operations | a set of operations that is sorted form top to bottom | Array | [] |
+| showSearch | to set if the search box can be shown | Boolean | false |
+| searchPlaceholder | the default value of the search box | String | 'Please input the content' |
+| notFoundContent | display the content when list is empty | React.node | 'The list is empty' |
+| footer | a function to render the footer | Function(props) | |
+
+
+## Warning
+
+According the [standard](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children) of React, the key should always be supplied directly to the components in the array. In Transfer, the keys should be set for `dataSource`. `dataSource` use each record's `key` as the default unique flag.
+
+If there's no `key` in your data, you should use `rowKey` to specify the primary key.
+```jsx
+// eg. your primary key is `uid`
+return record.uid} />;
+```
\ No newline at end of file
diff --git a/components/transfer/index.md b/components/transfer/index.zh-CN.md
similarity index 100%
rename from components/transfer/index.md
rename to components/transfer/index.zh-CN.md