From 6f620b0e91cd95d2e2bb2ed1ea423348b1393588 Mon Sep 17 00:00:00 2001 From: lixiaochou077 Date: Wed, 3 Aug 2016 10:10:13 +0800 Subject: [PATCH] docs: translate transfer (#2586) --- components/transfer/demo/advanced.md | 18 +++++--- components/transfer/demo/basic.md | 14 +++++-- components/transfer/demo/custom-item.md | 14 +++++-- components/transfer/demo/search.md | 14 +++++-- components/transfer/index.en-US.md | 41 +++++++++++++++++++ .../transfer/{index.md => index.zh-CN.md} | 0 6 files changed, 87 insertions(+), 14 deletions(-) create mode 100644 components/transfer/index.en-US.md rename components/transfer/{index.md => index.zh-CN.md} (100%) diff --git a/components/transfer/demo/advanced.md b/components/transfer/demo/advanced.md index c6ecf0f35..ef6229920 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 18851ff52..4edb2e04c 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 cb03427c5..389f3534f 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 e65385839..306b760dc 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 000000000..569825158 --- /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