青梧 UI

Notifications 通知铃铛

铃铛触发器 + 未读红点徽标 + 手风琴错峰下拉面板。未读时铃铛左右摆动(可一键关闭摇铃动画),受控更新:动态推送消息 / 清空未读 / 切换摇铃。

操作日志
点击铃铛展开,点击条目查看回调
import { Notifications } from "@qingwu-ui/notifications";
import "@qingwu-ui/notifications/style.css";

const ntf = new Notifications(container, {
  items: [
    { id: 1, title: "青梧 UI 0.9.0 发布", sub: "12 包全量对齐", glyph: "梧", unread: true },
    { id: 2, title: "日历邀请已通过", sub: "周三 10:00 评审会", unread: false },
  ],
  unreadCount: 1,
  ring: true, // 未读响铃摆动开关
  // ringMode: "intermittent", ringInterval: 4000, // 按频率间歇重响
  onItemClick: (item) => handle(item),
  onOpenChange: (open) => console.log(open),
});

// 受控更新:推送 / 清未读
ntf.update({ items, unreadCount: 0 });
ntf.destroy(); // 卸载时销毁

基础:未读红点

默认渲染 title + sub + 首字 glyph + 未读圆点;未读数 > 0 时触发器右上角弹入朱砂红点。

空态

列表为空时显示 emptyText 占位,可自定义文案。

自定义渲染

renderItem 返回任意节点:此处渲染为「版本发布」样式(品牌色图标 + 双行 + 版本徽标)。

向上翻转

触发器贴近视口底部时面板自动向上展开,错峰动画同步反向(自下而上逐条按下)。

全键盘导航

焦点保持在触发器,aria-activedescendant 指向高亮条目;Tab 聚焦铃铛后即可用方向键操作。

  • Enter / 空格打开 / 关闭面板
  • ↑ / ↓在条目间移动高亮
  • Home / End跳到首 / 尾条目
  • Enter确认选中高亮条目
  • Esc / Tab收起面板