cnd-components-mcp/componentData/components/Transfer/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 示例
```tsx
import React from 'react';
import { Transfer } from '@alicloud/console-components';

const labels = [
  '默认项',
  '默认项',
  '默认项',
  '聚焦项',
  '默认项',
  '失效项',
  '默认项',
];
const getDataSource = () => {
  const result = [];

  for (let i = 0; i < 10; i++) {
    result.push({
      label: labels[i],
      value: `${i}`,
      disabled: i === 5,
    });
  }

  return result;
};

const handleChange = (value, data, extra) => {
  console.log(value, data, extra);
};

export default () => {
  return (
    <Transfer
      mode="simple"
      defaultValue={['3', '2']}
      defaultLeftChecked={['1']}
      dataSource={getDataSource()}
      onChange={handleChange}
      titles={[
        &lt;span style={{ fontWeight: 500 }}&gt;项目列表标题&lt;/span&gt;,
        &lt;span style={{ fontWeight: 500 }}&gt;项目列表标题&lt;/span&gt;,
      ]}
    />
  );
};

export const meta = {
  title: '默认',
  describe: '基础用法，可通过titles定制两侧标题，mode属性控制选项模式。',
};

```
```tsx
import React from 'react';
import { Transfer } from '@alicloud/console-components';

const labels = [
  '默认项',
  '默认项',
  '默认项',
  '聚焦项',
  '默认项',
  '失效项',
  '默认项',
];
const getDataSource = () => {
  const result = [];

  for (let i = 0; i < 10; i++) {
    result.push({
      label: labels[i],
      value: `${i}`,
      disabled: i === 5,
    });
  }

  return result;
};

const handleChange = (value, data, extra) => {
  console.log(value, data, extra);
};

export default () => {
  return (
    <Transfer
      showSearch
      mode="simple"
      defaultValue={['3', '2']}
      defaultLeftChecked={['1']}
      dataSource={getDataSource()}
      onChange={handleChange}
      titles={[
        &lt;span style={{ fontWeight: 500 }}&gt;项目列标题&lt;/span&gt;,
        &lt;span style={{ fontWeight: 500 }}&gt;项目列标题&lt;/span&gt;,
      ]}
    />
  );
};

export const meta = {
  title: '带搜索',
  describe: '通过 showSearch 属性控制显示搜索框。',
};

```
## 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```