docs: translate transfer (#2586)

pull/2600/head
lixiaochou077 9 years ago committed by Benjy Cui
parent ef84f8d408
commit 6f620b0e91

@ -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({
<Button type="ghost" size="small" style={{ float: 'right', margin: 5 }}
onClick={this.getMock}
>
刷新
reload
</Button>
);
},
@ -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}`}

@ -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) {

@ -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) {

@ -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) {

@ -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 <Transfer rowKey={record => record.uid} />;
```
Loading…
Cancel
Save