iter(g48): 新增 splitter 可拖拽分栏容器

This commit is contained in:
HIsheR
2026-10-26 12:11:44 +08:00
parent 5c10eb2a5f
commit d7bfabb3ab
12 changed files with 301 additions and 10 deletions
+44 -2
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T04:10:00.644Z",
"generatedAt": "2026-10-26T04:11:34.965Z",
"repoRoot": ".",
"packages": [
{
@@ -189,7 +189,8 @@
"notification(props):右下角通知卡片(标题 + 描述 + 操作区),返回 { el, close } 句柄,缺省常驻需手动关闭",
"result(props):结果页,status 四档语义色 + 标题 + 说明 + 操作区,用于提交完成/校验失败等终态",
"transfer(props):穿梭框,左右两栏勾选后整体搬运,targetKeys 信号双向绑定,两栏各自搜索与全选(含半选),禁用条目不参与搬运也不可勾选",
"cascader(props):级联选择,多列联动面板(悬停下钻 / 点击提交),value 为路径数组信号,changeOnSelect 允许停在中间层,全键盘可操作"
"cascader(props):级联选择,多列联动面板(悬停下钻 / 点击提交),value 为路径数组信号,changeOnSelect 允许停在中间层,全键盘可操作",
"splitter(props):可拖拽分栏容器,分隔条支持指针拖拽 / 方向键微调 / 双击复位,sizes 为百分比数组信号"
],
"keyTypes": [
"ButtonProps",
@@ -2153,6 +2154,47 @@
"键盘:↑↓ 同列移动、→ 下钻、← 回退、Enter/空格 提交、Esc 收起(与弹窗共用一个 Esc 栈)",
"面板空间不足时自动向上翻转;disabled 选项不可点也不会展开下一列"
]
},
{
"id": "splitter",
"title": "可拖拽分栏 Splitter",
"demo": "sec-splitter",
"props": [
{
"n": "panes",
"t": "unknown[]",
"r": 1,
"d": "各栏内容(节点或纯文本),顺序即排列顺序"
},
{
"n": "direction",
"t": "'horizontal' | 'vertical'",
"d": "分割方向;缺省 horizontal(左右)"
},
{
"n": "sizes",
"t": "Signal<number[]>",
"d": "各栏百分比数组(和为 100);不传则内部均分"
},
{
"n": "min",
"t": "number",
"d": "每栏最小百分比;缺省 10,拖到边界即停"
},
{
"n": "onChange",
"t": "(sizes: number[]) => void",
"d": "拖拽 / 键盘调整后回调(传副本)"
}
],
"example": "splitter({ sizes: ratio, min: 15, panes: [leftPanel, rightPanel], onChange: (s) => ratio([...s]) })",
"steps": [
"panes 长度决定栏数与分隔条数(n 栏对应 n-1 条),栏宽由 sizes 百分比驱动",
"指针按住分隔条拖动即可改比例,拖动过程两栏之和恒定、各自不低于 min",
"分隔条可 Tab 聚焦,← → / ↑ ↓ 每次调 2%,按住 Shift 调 10%;双击复位为均分",
"direction 传 vertical 变为上下分栏,键盘方向键与光标同步切换",
"传入 sizes 信号即受控,外部写入可做「预设布局」切换(如 1:1 / 2:1)"
]
}
]
},