iter(g92): 徽标支持数字角标与红点

This commit is contained in:
HIsheR
2026-10-26 13:11:29 +08:00
parent 8e6c84ade3
commit ac5c5cd233
8 changed files with 92 additions and 24 deletions
+9 -6
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T05:10:23.912Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T05:11:11.108Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -418,8 +418,11 @@ card({ title: '用户表' }, dataTable({ data, columns }))
参数:
- label(必填):string —— 徽标文案
- variant(默认 default):'default' | 'success' | 'warning' | 'danger' —— 语义色;缺省 default
- label:string —— 徽标文案;与 count / dot 三选一,dot 时作可访问名
- variant:'default' | 'success' | 'warning' | 'danger' —— 语义色;缺省 default
- count:number —— 数字角标:超过 max 显示 N+,负数归零
- max:number —— 数字上限;缺省 99
- dot:boolean —— 只显示小红点(无文字),role=img + label 作名称
示例:
@@ -429,9 +432,9 @@ badge({ label: '成功', variant: 'success' })
手把手:
1. 选择语义色:default 中性、success 成功、warning 警告、danger 危险
2. 传入 label 即可,纯展示组件无状态
3. 状态语义靠 variant 承载,不要自造颜色;纯展示不可交互,需要操作请配 button
1. 纯状态文案直接传 label,配 variant 定语义色
2. 要显示数量传 count(如未读数),超过 max(缺省 99)自动渲染成 99+
3. 只提示「有更新」用 dot: true,配合 label 给出读屏名(如「有未读消息」)
现场演示:apps/docs/demo.html#sec-feedback