cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
242 lines (201 loc) • 16.3 kB
Markdown
## 简介
穿梭框常用于多项信息选择场景，方便用户直观的对比待选项与已选项，其中待选项即可以被转移到已选项中（剪切），也可以被复制到已选项中（复制）。
## 示例
```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={[
<span style={{ fontWeight: 500 }}>项目列表标题</span>,
<span style={{ fontWeight: 500 }}>项目列表标题</span>,
]}
/>
);
};
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={[
<span style={{ fontWeight: 500 }}>项目列标题</span>,
<span style={{ fontWeight: 500 }}>项目列标题</span>,
]}
/>
);
};
export const meta = {
title: '带搜索',
describe: '通过 showSearch 属性控制显示搜索框。',
};
```
## API
### Transfer
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------- |
| mode | 移动选项模式 | 'normal' | 'simple' | 'normal' | |
| dataSource | 数据源 | Array\<TransferDataItem> | \[] | |
| value | （用于受控）当前值 | Array\<string> | - | |
| defaultValue | （用于非受控）初始值 | Array\<string> | \[] | |
| onChange | 值发生改变的时候触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*value*: 右面板值<br/>*data*: 右面板数据<br/>*extra*: 额外参数 | (value: Array\<string>, data: Array\<TransferDataItem>, extra: ExtraOptions) => void | - | |
| onSelect | Item 被选中的时候触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*sourceSelectedValue*: 源面板选中的 Item 列表<br/>*targetSelectedValue*: 目标面板选中的 Item 列表<br/>*target*: 触发面板 'source' | 'target' | (<br/> sourceSelectedValue: Array\<string>,<br/> targetSelectedValue: Array\<string>,<br/> target: 'source' | 'target'<br/> ) => void | - | |
| disabled | 是否禁用 | boolean | false | |
| leftDisabled | 是否禁用左侧面板 | boolean | false | |
| rightDisabled | 是否禁用右侧面板 | boolean | false | |
| itemRender | 列表项渲染函数<br/><br/>**签名**:<br/>**参数**:<br/>*data*: 数据<br/>**返回值**:<br/>列表项内容 | (data: TransferDataItem) => React.ReactNode | - | |
| showSearch | 左右面板是否显示搜索框 | boolean | \[leftPanel: boolean, rightPanel: boolean] | false | |
| searchProps | 左右面板搜索框配置 | SearchProps | \[leftPanel: SearchProps, rightPanel: SearchProps] | - | |
| filter | 自定义搜索函数<br/><br/>**签名**:<br/>**参数**:<br/>*searchedValue*: 搜索框输入的值<br/>*data*: 数据<br/>**返回值**:<br/>是否匹配到 | (searchedValue: string, data: TransferDataItem) => boolean | - | |
| onSearch | 搜索框输入时触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*searchedValue*: 搜索框输入的值<br/>*position*: 搜索面板的位置 | (searchedValue: string, position: string) => void | - | |
| useVirtual | 是否开启虚拟滚动 | boolean | - | |
| searchPlaceholder | 搜索框占位符 | string | - | |
| notFoundContent | 列表为空显示内容 | React.ReactNode | \[leftPanel: React.ReactNode, rightPanel: React.ReactNode] | 'Not Found' | |
| titles | 左右面板标题 | \[leftPanel: React.ReactNode, rightPanel: React.ReactNode] | \[] | |
| operations | 向右向左移动按钮显示内容 | \[leftPanel: React.ReactNode, rightPanel: React.ReactNode] | \[] | |
| defaultLeftChecked | 左面板默认选中值 | Array\<string> | \[] | |
| defaultRightChecked | 右面板默认选中值 | Array\<string> | \[] | |
| listClassName | 左右面板列表自定义样式类名 | string | - | |
| listStyle | 左右面板列表自定义样式对象 | React.CSSProperties | - | |
| sortable | 是否允许拖拽排序 | boolean | false | |
| onSort | 拖拽排序时触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*value*: 右面板值<br/>*position*: 拖拽的面板位置，值为：left 或 right | (value: Array\<string>, position: PositionType) => void | - | |
| id | 请设置 id 以保证transfer的可访问性 | string | - | |
| showCheckAll | 是否显示底部全选 checkbox | boolean | true | |
| children | 接收 children 自定义渲染列表 | (props: TransferPanelProps) => React.ReactNode | - | |
### TransferDataItem
```typescript
export type TransferDataItem = {
label: string | React.ReactNode;
value: string;
title?: string;
disabled?: boolean;
children?: TransferDataItem[];
[key: string]: unknown;
};
```
### PositionType
```typescript
export type PositionType = 'left' | 'right';
```
### DragGapType
```typescript
export type DragGapType = 'before' | 'after';
```
### ExtraOptions
```typescript
export type ExtraOptions = {
/**
* 移动的方向，值为'left'或'right'
* @en Move direction, 'left' or 'right'
*/
direction: PositionType;
/**
* 左面板值
* @en Data of left panel
*/
leftValue: string[];
/**
* 左面板数据
* @en Data of left panel
*/
leftData: TransferDataItem[];
/**
* 发生移动的数据
* @en Moved data
*/
movedData: TransferDataItem[];
/**
* 发生移动的值
* @en Moved value
*/
movedValue: string[];
};
```
## 无障碍键盘操作指南
| 按键 | 说明 |
| :--------- | :------------------------------------------------ |
| Up Arrow | 获取当前项的前一项焦点 |
| Down Arrow | 获取当前项的后一项焦点 |
| Enter | 当前列表选中的项移动到另一个列表 |
| SPACE | 选择/取消当前项或当前列表选中的项移动到另一个列表 |
## 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```