mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:ant-design/ant-design

Browse Source
This commit is contained in:
afc163 2016-08-04 14:23:07 +08:00
commit 3bae249170
4 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,9 @@ title:
## 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.
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.
````jsx
import { Transfer, Button } from 'antd';

6
components/transfer/demo/basic.md
View File

@ -7,11 +7,11 @@ title:
## zh-CN
最基本的用法。
最基本的用法，展示了 `dataSource`、`targetKeys`、每行的渲染函数 `render` 以及回调函数 `onChange` 的用法。
## en-US
## en-US
The most basic usage.
The most basic usage of `Transfer` involves providing the source data and target keys arrays, plus the rendering and change callback functions.
````jsx
import { Transfer } from 'antd';

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

@ -5,37 +5,39 @@ 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
Move the elements between two columns in an intuitive way to make a choice.
To transfer the elements between two columns in an intuitive and efficient way.
## 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) | |
| 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 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 | ['源列表', '目的列表'] |
| 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' |
| notFoundContent | Text to display when a column is empty. | React.node | 'The list is empty' |
| footer | A function used for rendering 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.
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 primary key.
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
// eg. your primary key is `uid`
return <Transfer rowKey={record => record.uid} />;
```
```

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} />;
```
```