交互控件NotificationBelliOS 风格角标asChild

通知铃铛

iOS 风格的通知铃铛，带未读数量角标或纯圆点两种形态。

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/notification-bell.tsx。

npx shadcn@latest add swamimalode07/rare-ui/notification-bell

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

notification-bell.tsx

1import { NotificationBell } from "@/components/ui/notification-bell"
2
3export function Demo() {
4  return (
5    <NotificationBell count={12} max={99} variant="count" color="red" size={36} />
6  )
7}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性	类型	默认值	说明
count	number	—	未读数量。
max	number	99	超过后显示 99+。
variant	"count" \| "dot"	"count"	角标形态。
size	number	—	按钮尺寸。
color	string	—	角标配色。
asChild	boolean	false	把触发能力交给子元素。