mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-06 02:15:35 +08:00
347fea69ee
* add checkboxLabels prop in Transfer * change prop to `selectAllLabels` and add demo * update transfer demo test snapshot * refine param in one object and update demo
1011 B
1011 B
order | debug | title | ||||
---|---|---|---|---|---|---|
99 | true |
|
zh-CN
自定义穿梭框全选按钮的文字。
en-US
Custom the labels for select all checkboxs.
import React, { useState } from 'react';
import { Transfer } from 'antd';
const mockData = [];
for (let i = 0; i < 10; i++) {
mockData.push({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,
});
}
const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);
const selectAllLabels = [
'Select All',
({ selectedCount, totalCount }) => `${selectedCount}/${totalCount}`,
];
const App = () => {
const [targetKeys, setTargetKeys] = useState(oriTargetKeys);
return (
<Transfer
dataSource={mockData}
targetKeys={targetKeys}
onChange={setTargetKeys}
render={item => item.title}
selectAllLabels={selectAllLabels}
/>
);
};
ReactDOM.render(<App />, mountNode);