iter(g55): 新增 checkboxGroup 多选组组件

This commit is contained in:
HIsheR
2026-10-26 12:19:23 +08:00
parent 73b37b1cdf
commit e54fdb6f22
12 changed files with 270 additions and 10 deletions
+30 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T04:18:05.467Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T04:19:05.352Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -1412,6 +1412,34 @@ watermark({ text: '内部资料\n仅限内网', gap: 160 }, card({ title: '受
现场演示:apps/docs/demo.html#sec-watermark
### checkboxGroup — 多选组 CheckboxGroup
参数:
- options(必填):CheckOption[] —— 选项集合:value / label / 可选 disabled
- value:Signal<string[]> —— 选中值数组信号;不传则内部维护
- min:number —— 最少选几项:到下限后已选项禁用,防止取消
- max:number —— 最多选几项:到上限后未选项禁用
- checkAll:boolean —— 是否显示全选行(含半选);缺省 false
- direction:'horizontal' | 'vertical' —— 排列方向;缺省 horizontal
- disabled:boolean | Signal<boolean> —— 整组禁用
- onChange:(values: string[]) => void —— 变更回调(传副本)
示例:
```
checkboxGroup({ value: permPick, min: 1, max: 3, checkAll: true, options: [{ value: 'read', label: '读取' }, { value: 'write', label: '写入' }] })
```
手把手:
1. options 顺序即渲染顺序;勾选后把整份数组写回 value 信号并触发 onChange
2. max 生效时未选项自动禁用,min 生效时已选项自动禁用——用禁用表达边界,不抛错也不静默回滚
3. checkAll 行的选中/半选只统计未禁用项,禁用项不计入基数
4. direction 传 vertical 改为纵向排列;disabled 支持信号,整组响应式禁用
现场演示:apps/docs/demo.html#sec-checkgroup
API 速览:
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
@@ -1469,6 +1497,7 @@ API 速览:
- colorPicker(props):颜色选择,预设色板(缺省语义令牌色)+ 原生取色器 + 手输 CSS 颜色串,value 为颜色串信号
- tour(props):引导漫游,返回 { el, start, close } 句柄;聚光框按 target 选择器定位,卡片自动选方位,Esc / 跳过走 onClose
- watermark(props, ...children):内容容器 + 平铺水印覆盖层,canvas 生成单元、颜色取自令牌,覆盖层不挡交互
- checkboxGroup(props):多选组,value 为数组信号,min/max 用禁用边界项实现(不抛错),checkAll 支持半选且只统计未禁用项
一行用法: