反馈组件版本 0.1.0

NotificationCenter 通知中心

集中展示可读、可标记和可执行操作的多条持久通知。

使用概览

适合使用

用户需要回顾多条业务通知并管理已读状态时。

不建议使用

只需反馈刚刚完成的一次操作且无需保留历史时。

真实示例

审核已通过

正在加载示例…

安装

本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。

pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/notification-center.json

基础用法

导入

import { NotificationCenter } from "@richardqiu/quartz/notification-center";

JSX

<NotificationCenter aria-label="通知中心" items={[{ id: "review", title: "审核已通过", read: false, tone: "success" }]} emptyContent="暂无通知" markReadLabel={() => "标记为已读"} />

状态与控制摘要

默认

键盘焦点可见

空状态

label · textactive · boolean

API 参考

属性	类型	默认值	说明
`items`	`readonly NotificationItem[]`	`必填`	提供通知内容、已读状态与可选操作集合。
`onReadChange`	`(itemId: string, read: boolean) => void`	`未设置`	在用户切换单条通知已读状态时触发。

组合结构

01NotificationCenter

键盘约定

Tab 按文档顺序访问未读与项目操作，Enter 或空格键激活当前操作。

可访问性契约

集合是由使用方命名、采用语义列表标记的区域。
未读操作需要由使用方提供可访问名称。