iter(g92): 徽标支持数字角标与红点
This commit is contained in:
+9
-6
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user