iter(g48): 新增 splitter 可拖拽分栏容器
This commit is contained in:
@@ -60,7 +60,8 @@
|
||||
"notification(props):右下角通知卡片(标题 + 描述 + 操作区),返回 { el, close } 句柄,缺省常驻需手动关闭",
|
||||
"result(props):结果页,status 四档语义色 + 标题 + 说明 + 操作区,用于提交完成/校验失败等终态",
|
||||
"transfer(props):穿梭框,左右两栏勾选后整体搬运,targetKeys 信号双向绑定,两栏各自搜索与全选(含半选),禁用条目不参与搬运也不可勾选",
|
||||
"cascader(props):级联选择,多列联动面板(悬停下钻 / 点击提交),value 为路径数组信号,changeOnSelect 允许停在中间层,全键盘可操作"
|
||||
"cascader(props):级联选择,多列联动面板(悬停下钻 / 点击提交),value 为路径数组信号,changeOnSelect 允许停在中间层,全键盘可操作",
|
||||
"splitter(props):可拖拽分栏容器,分隔条支持指针拖拽 / 方向键微调 / 双击复位,sizes 为百分比数组信号"
|
||||
],
|
||||
"keyTypes": [
|
||||
"ButtonProps",
|
||||
@@ -2024,6 +2025,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)"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user