iter(g35): 新增 notification 通知卡片组件
This commit is contained in:
+29
-1
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||
|
||||
> 自动生成于 2026-10-26T03:45:25.126Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 自动生成于 2026-10-26T03:46:32.583Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -1115,6 +1115,33 @@ upload({ multiple: true, accept: 'image/*', hint: '拖拽图片到此处', onCha
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-upload
|
||||
|
||||
### notification — 通知卡片 Notification
|
||||
|
||||
参数:
|
||||
|
||||
- title(必填):string —— 通知标题
|
||||
- description:string —— 补充说明;缺省不渲染
|
||||
- variant:'info' | 'success' | 'warning' | 'danger' —— 语义色(左侧条与圆点);缺省 info
|
||||
- duration:number —— 自动关闭毫秒;缺省 0 = 常驻不自动关
|
||||
- closable:boolean —— 是否显示关闭按钮;缺省 true
|
||||
- action:unknown —— 操作区内容(如按钮);缺省不渲染
|
||||
|
||||
示例:
|
||||
|
||||
```
|
||||
const { close } = notification({ title: '导出完成', description: 'report.csv 已开始下载', variant: 'success', duration: 4000 }); // close() 手动关闭
|
||||
```
|
||||
|
||||
手把手:
|
||||
|
||||
1. 调用即入列:右下角堆叠,同屏最多 3 条,超出自动挤掉最早一条
|
||||
2. 缺省常驻(duration 0),需要自动消失就传毫秒数,如 duration: 4000
|
||||
3. 返回 { el, close } 句柄:程序化关闭用 close(),需要自己挂交互就用 el
|
||||
4. action 放操作区(常见为按钮);variant 决定左侧条与圆点语义色
|
||||
5. 与 toast 的分工:toast 右上角轻量瞬时,notification 右下角可长读、可操作
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-notification
|
||||
|
||||
API 速览:
|
||||
|
||||
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用
|
||||
@@ -1161,6 +1188,7 @@ API 速览:
|
||||
- carousel(props):轮播,items 横排位移,指示点/箭头/←→ 键切换,autoplay 毫秒自动前进且悬停暂停,index 信号可外部受控
|
||||
- tree(props):树形,递归节点 + 箭头展开/收起 + 点选节点,键盘 Enter 选中、→ 展开、← 收起,禁用节点不响应
|
||||
- upload(props):文件选择,点击或拖拽入列,清单可逐个移除,onChange 回传文件数组(不内置上传请求)
|
||||
- notification(props):右下角通知卡片(标题 + 描述 + 操作区),返回 { el, close } 句柄,缺省常驻需手动关闭
|
||||
|
||||
一行用法:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user