نشان اعلان
notification-badgeانیمیشننشان از دل آیکون بهصورت مورب بیرون میآد و نقطهش با فنر باز میشه؛ خود آیکون فقط یک تکان کوتاه میخوره.
۳
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add notification-badgeنصب دستی
محتوای تب «کد» را در
components/animations/notification-badge.tsxبگذارید. کلیدفریم را هم بهglobals.cssاضافه کنید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { NotificationBadge } from "@/components/animations/notification-badge"23<NotificationBadge show={unread > 0} count={unread}>4 <Bell className="size-5" />5</NotificationBadge>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| show | boolean | - | نمایش یا پنهان کردن نشان. |
| count | number | - | عدد داخل نشان با اعداد فارسی؛ بالای ۹۹ میشه «۹۹+». اگر ندید، فقط یک نقطه نشان داده میشه. |
| ring | boolean | true | آیکون هنگام ظاهر شدن نشان کمی تکان بخوره. |
نکتهها
- نشان روی گوشهی انتهایی خط (inline-end) میشینه، یعنی در فارسی بالا-چپ آیکون، و جهت سُر خوردنش هم با rtl: برعکس میشه.