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