Ant Design Blazor
Transfer穿梭框
双栏穿梭选择框。
何时使用
- 需要在多个可选项中进行多选时。
- 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。
穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。
选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。其中，左边一栏为 source，右边一栏为 target，API 的设计也反映了这两个概念。
Examples
最基本的用法，展示了 dataSource、targetKeys、每行的渲染函数 render 以及回调函数 onChange onSelectChange onScroll 的用法。
带搜索框的穿梭框，可以自定义搜索函数。
穿梭框高级用法，可配置操作文案，可定制宽高，可对底部进行自定义渲染。
自定义渲染每一个 Transfer Item，可用于渲染复杂数据。
使用 Table 组件作为自定义渲染列表。
使用 Tree 组件作为自定义渲染列表。
Transfer API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| DataSource | 属性用于设置源数据。作为此数组一部分的元素将出现在左列中，但其键包含在 AntDesign.Transfer.TargetKeys 中的元素除外。 |
IEnumerable<TransferItem> | -- |
| Titles | 属性从左到右的列标题。必须是包含 2 个元素的数组。 | String[] | -- |
| Operations | 属性从上到下显示在操作图标旁边的标签。必须是包含 2 个元素的数组。 | String[] | -- |
| Disabled | 属性组件是否禁用 | Boolean | false |
| ShowSearch | 属性是否在列中显示搜索栏 | Boolean | false |
| ShowSelectAll | 属性是否显示选择列中的所有按钮 | Boolean | true |
| TargetKeys | 属性右列中列出的元素的键 | IEnumerable<String> | -- |
| SelectedKeys | 属性当前选择的项目 | IEnumerable<String> | -- |
| OnChange | 属性项目移动列时执行的回调 | EventCallback<TransferChangeArgs> | -- |
| OnScroll | 属性滚动列时执行的回调 | EventCallback<TransferScrollArgs> | -- |
| OnSearch | 属性搜索列时执行的回调 | EventCallback<TransferSearchArgs> | -- |
| OnSelectChange | 属性当任一列中的所选项目发生变化时执行的回调 | EventCallback<TransferSelectChangeArgs> | -- |
| Render | 属性列中项目的自定义呈现 | Func<TransferItem, OneOf<String, RenderFragment>> | -- |
| Locale | 属性用于文本本地化的 Locacle | TransferLocale | -- |
| Footer | 属性在每列的页脚中显示的页脚字符串 | String | -- |
| FooterTemplate | 属性每列页脚显示的页脚内容 | RenderFragment | -- |
| ChildContent | 属性子内容 | RenderFragment | -- |
| ListStyle | 属性用于呈现传输列的自定义 CSS 样式 | Func<TransferDirection, String> | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |