iter(g46): 新增 transfer 穿梭框组件
This commit is contained in:
+29
-1
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||
|
||||
> 自动生成于 2026-10-26T03:53:26.496Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 自动生成于 2026-10-26T04:07:52.893Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -1174,6 +1174,33 @@ result({ status: 'success', title: '提交成功', description: '工单 #2049
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-result
|
||||
|
||||
### transfer — 穿梭框 Transfer
|
||||
|
||||
参数:
|
||||
|
||||
- dataSource(必填):TransferItem[] —— 全量条目,左右两栏都按是否在 targetKeys 里派生
|
||||
- targetKeys:Signal<string[]> —— 右侧集合信号;不传则组件内部维护,传了即外部受控
|
||||
- titles:[string, string] —— 左右栏标题;缺省「待选列表 / 已选列表」
|
||||
- searchable:boolean —— 是否显示搜索框;缺省 true,逐栏独立过滤
|
||||
- height:number —— 列表区固定高度像素;缺省走样式表 220,超出滚动
|
||||
- onChange:(keys: string[]) => void —— 右侧集合变化回调(搬运后触发,传副本)
|
||||
|
||||
示例:
|
||||
|
||||
```
|
||||
transfer({ targetKeys: enabled, titles: ['待选', '已启用'], onChange: (keys) => toast.info(`已启用 ${keys.length} 项`), dataSource: [{ key: 'a11y', label: '无障碍语义' }, { key: 'ssr', label: 'SSR(暂不可用)', disabled: true }] })
|
||||
```
|
||||
|
||||
手把手:
|
||||
|
||||
1. dataSource 是唯一数据源,条目归属由 targetKeys 决定;搬运只改 targetKeys,不删条目
|
||||
2. 两栏独立勾选,勾选后点中间 → / ← 整体搬运,搬完两栏勾选自动清空;无勾选时按钮自动禁用
|
||||
3. 每栏均有搜索框与全选:全选只覆盖当前搜索结果里未禁用的条目,部分勾选时全选框显示半选
|
||||
4. disabled 条目不可勾选、不计入全选基数、也不会被搬运
|
||||
5. 传入 targetKeys 信号即为受控用法,外部写入即可程序化搬运(如「一键全选」)
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-transfer
|
||||
|
||||
API 速览:
|
||||
|
||||
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
|
||||
@@ -1222,6 +1249,7 @@ API 速览:
|
||||
- upload(props):文件选择,点击或拖拽入列,清单可逐个移除,onChange 回传文件数组(不内置上传请求)
|
||||
- notification(props):右下角通知卡片(标题 + 描述 + 操作区),返回 { el, close } 句柄,缺省常驻需手动关闭
|
||||
- result(props):结果页,status 四档语义色 + 标题 + 说明 + 操作区,用于提交完成/校验失败等终态
|
||||
- transfer(props):穿梭框,左右两栏勾选后整体搬运,targetKeys 信号双向绑定,两栏各自搜索与全选(含半选),禁用条目不参与搬运也不可勾选
|
||||
|
||||
一行用法:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user