mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 27 Packages Projects Releases Wiki Activity

docs: sync, ref: #2607

Browse Source
This commit is contained in:
Benjy Cui 2016-08-04 09:45:50 +08:00
parent c8f2793ec3
commit 37a3861c65
3 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/transfer/demo/advanced.md
View File

@ -11,7 +11,7 @@ title:
## en-US
Advanced Usage of Transfer
Advanced Usage of Transfer.
You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.

14
components/transfer/index.en-US.md
View File

@ -5,13 +5,13 @@ cols: 1
title: Transfer
---
Double column transfer choice box.
Double column transfer choice box. One or more elements can be selected from either column, one click on the proper 'direction' button, and the transfer is done.
The left column is considered the 'source' and the right column is considered the 'target'. As you can see in the API description, these names are reflected in.
## When To Use
To transfer the elements between two columns in an intuitive and efficient way. One or more elements can be selected from either column, one click on the proper 'direction' button, and the transfer is done.
The left column is considered the 'source' and the right column is considered the 'target'. As you can see in the API description, these names are reflected in
To transfer the elements between two columns in an intuitive and efficient way.
## API
@ -19,12 +19,12 @@ The left column is considered the 'source' and the right column is considered th
| Property | Description | Type | Default |
|-----------|------------------------------------------|------------|--------|
| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop. | Array | [] |
| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a string that would contain one or more attributes of that record. | Function(record) | |
| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. | Function(record) | |
| targetKeys | A set of keys of elements that are listed on the right column. | Array | [] |
| onChange | A callback function that is executed when the transfer between columns is complete. | Function(targetKeys, direction, moveKeys) | |
| listStyle | A custom CSS style used for rendering the transfer columns. | Object | |
| className | A custom CSS class. | String | |
| titles | A set of titles that are sorted from left to right. | Array | ['source list', 'target list'] |
| titles | A set of titles that are sorted from left to right. | Array | ['源列表', '目的列表'] |
| operations | A set of operations that are sorted form top to bottom. | Array | [] |
| showSearch | If included, a search box is shown on each column. | Boolean | false |
| searchPlaceholder | The hint text of the search box. | String | 'Please input the content' |
@ -34,7 +34,7 @@ The left column is considered the 'source' and the right column is considered th
## 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 elements in the array. In Transfer, the keys should be set on the elements included in `dataSource` array. By default, `key` attribute is used as an unique identifier.
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 elements in the array. In Transfer, the keys should be set on the elements included in `dataSource` array. By default, `key` property is used as an unique identifier.
If there's no `key` in your data, you should use `rowKey` to specify the key that will be used for uniquely identify each element.
```jsx

12
components/transfer/index.zh-CN.md
View File

@ -6,7 +6,9 @@ cols: 1
english: Transfer
---
双栏穿梭选择框。
双栏穿梭选择框。选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。
其中，左边一栏为 `source`，右边一栏为 `target`，API 的设计也反应了这两个概念。
## 何时使用
@ -17,10 +19,10 @@ english: Transfer
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
| dataSource | 数据源 | Array | [] |
| render | 每行数据渲染函数 | Function(record) | |
| dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。 | Array | [] |
| render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 React element | Function(record) | |
| targetKeys | 显示在右侧框数据的key集合 | Array | [] |
| onChange | 变化时回调函数 | Function(targetKeys, direction, moveKeys) | |
| onChange | 选项在两栏之间转移时的回调函数 | Function(targetKeys, direction, moveKeys) | |
| listStyle | 两个穿梭框的自定义样式 | Object | |
| className | 自定义类 | String | |
| titles | 标题集合,顺序从左至右 | Array | ['源列表', '目的列表'] |
@ -39,4 +41,4 @@ english: Transfer
```jsx
// 比如你的数据主键是 uid
return <Transfer rowKey={record => record.uid} />;
```
```