iter(g244): 新增 inputTag 标签输入组件,回车成标签并支持满额禁输

This commit is contained in:
HIsheR
2026-10-26 21:57:52 +08:00
parent cd8a8e9b12
commit ea5149338a
12 changed files with 288 additions and 10 deletions
+32 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T13:53:12.662Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T13:57:11.667Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -2140,6 +2140,36 @@ highlight({ text: 'Alpha Beta', keyword: 'beta' })
现场演示:apps/docs/demo.html#sec-highlight
### inputTag — 标签输入 InputTag
参数:
- value(必填):Signal<string[]> —— 已选标签集合,双向绑定:成标签与删 chip 都写回信号
- placeholder:string —— 未满时的占位文案;缺省「输入后回车添加」
- max:number —— 最多允许的标签条数;缺省 0 表示不限,满额后输入框禁用并提示上限
- maxLength:number —— 单个标签最大字符数;缺省 24,超出直接截断
- allowDuplicate:boolean —— 是否允许重复标签;缺省 false(重复的静默丢弃)
- disabled:boolean | Signal<boolean> —— 禁用态:布尔或信号,true 时不可输入也不可删
- ariaLabel:string —— 输入框无障碍标签;缺省「标签输入」
- onChange:(tags: string[]) => void —— 标签集合变化回调,参数是变化后的完整集合
示例:
```
const tags = signal(['前端', '设计']);
inputTag({ value: tags, max: 5, onChange: (list) => console.log(list.length) })
```
手把手:
1. 传一个 signal<string[]> 作为 value:回车或逗号把当前输入转成 chip,写回信号后立即重画
2. 点 chip 上的 × 删除单个标签;输入框为空时按退格键删掉最后一个(手不离键盘也能改)
3. 输入后直接失焦也会成标签,不必强行回车;max 满额后输入框禁用,占位文案变成「最多 N 个标签」
4. 要区分大小写重复判断就传 allowDuplicate: true;默认按原样去重
5. 样式复用输入组与标签:外框聚焦光环、chip 圆角与语义色都跟既有组件一致,无新增视觉字面量
现场演示:apps/docs/demo.html#sec-inputtag
API 速览:
- button(props):按钮,variant 三档视觉强度,disabled / loading 支持布尔或信号动态同步(loading 转圈并禁点),onClick 点击回调
@@ -2219,6 +2249,7 @@ API 速览:
- countdown(props):倒计时,秒级递减到 0 自动停表并触发 onFinish,缺省 mm:ss 展示,返回句柄 start/stop/reset
- kbd(props):键盘按键标记,键帽样式展示单个按键或组合键(多键以 + 连接),用于快捷键提示
- highlight(props):关键词高亮,命中片段包 mark(大小写不敏感全部命中),text / keyword 支持信号响应式刷新
- inputTag(props):标签输入,输入后回车 / 逗号成标签、chip 可单个删除、空框退格删末个,value 信号双向绑定,max 满额自动禁输
一行用法: