Announcement Barv1.0.0
نواری تمام‌عرض که بالای صفحه (یا بالای هدر) می‌نشیند و یک پیام واحد و سطح‌سایت را اعلان می‌کند: تخفیف، معرفی قابلیت تازه، یا یک هشدار زمان‌بندی‌شده. برخلاف Alert که کنار محتوا و برای یک بخش خاص است، این نوار مالِ کل صفحه است.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/announcement-bar.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/announcement-bar.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/announcement-bar.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/announcement-bar.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import {
AnnouncementBar,
AnnouncementBarIcon,
AnnouncementBarTitle,
AnnouncementBarAction,
} from "@/components/ui/announcement-bar"
<AnnouncementBar color="primary" dismissible>
<AnnouncementBarTitle>پیام شما اینجا.</AnnouncementBarTitle>
<AnnouncementBarAction href="#">بیشتر بدانید</AnnouncementBarAction>
</AnnouncementBar>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
AnnouncementBar یک ردیفِ وسط‌چینِ افقی است؛ آیکون، عنوان و اقدام هرکدام اختیاری‌اند و کنار هم قرار می‌گیرند (نه یک گرید دوستونه مثل Alert، چون این نوار باریک و تک‌خطی طراحی شده).
رنگ با همان الگوی دو‌محوریِ Button/Alert/Badge کار می‌کند: محور color چهار متغیر CSS را ست می‌کند و محور variant تصمیم می‌گیرد کجا بنشینند — solid برای پس‌زمینهٔ توپرِ رنگی (پرتوجه‌ترین حالت، مناسب کمپین) و flat برای پس‌زمینهٔ ملایم‌ترِ کمتر مزاحم.
برای چسبیدن به بالای صفحه هنگام اسکرول، sticky بدهید؛ چون از position: sticky استفاده می‌کند (نه fixed)، المان‌های بعدی صفحه فضایش را می‌گیرند و چیدمان جابه‌جا نمی‌شود.
دسترس‌پذیری
- اگر پیام واقعاً فوری/تراکنشی است (مثلاً قطعی سرویس)، رنگ warning یا destructive با variant="solid" کنتراست کافی برای جلب توجه دارد.
- دکمهٔ بستن aria-label="بستن اعلان" دارد؛ اگر متن دیگری لازم دارید، dismissible را کنار بگذارید و دکمهٔ بستن دستی داخل نوار قرار دهید.
- AnnouncementBarAction یک تگ a معمولی است؛ href واقعی بدهید تا با کیبورد و صفحه‌خوان مثل هر لینک دیگری کار کند.
مرجع API
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| variant | "solid" | "flat" | "solid" | حالت بصری؛ تعیین می‌کند رنگ کجا بنشیند. |
| color | "default" | "primary" | "info" | "success" | "warning" | "destructive" | "primary" | رنگ معنایی، مستقل از variant. |
| sticky | boolean | false | چسباندن نوار به بالای صفحه هنگام اسکرول. |
| dismissible | boolean | false | دکمهٔ بستن را نشان می‌دهد. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open: boolean) => void | — | الگوی کنترل‌شده/کنترل‌نشدهٔ نمایش، مثل Alert. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
Colors
شش رنگ معنایی، همان پالتِ Alert: default برای اعلان خنثی، primary برای کمپین/معرفی، info، success، warning و destructive.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Flat variant
پس‌زمینهٔ ملایم‌تر برای وقتی نوار نباید روی هدر/برند سایت غالب شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Dismissible
با dismissible یک دکمهٔ بستن نشان داده می‌شود. برای اینکه بعد از بستن، در بازدید بعدی دوباره ظاهر نشود، وضعیتِ بسته‌بودن را با onOpenChange در localStorage ذخیره کنید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Sticky
sticky از position: sticky استفاده می‌کند، پس نوار در جریان عادی صفحه می‌ماند و روی محتوای دیگر نمی‌نشیند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| Colors | شش رنگ معنایی، همان پالتِ Alert: default برای اعلان خنثی، primary برای کمپین/معرفی، info، success، warning و destructive. |
| Flat variant | پس‌زمینهٔ ملایم‌تر برای وقتی نوار نباید روی هدر/برند سایت غالب شود. |
| Dismissible | کمپین موقتی که کاربر باید بتواند ببندد |
| Sticky | نوار باید هنگام اسکرول بالای صفحه بماند |
دستورالعمل استفاده
یک نوار، یک پیام
انجام بده
هر لحظه فقط یک AnnouncementBar روی صفحه باشد؛ اگر چند پیام دارید، مهم‌ترین را نشان بدهید و بقیه را جای دیگری (مثلاً یک صفحهٔ تغییرات) بگذارید.
انجام نده
چند AnnouncementBar پشت‌سرهم، مثل چند تیتر پاپ‌آپ پشت‌سرهم است؛ کاربر همه را نادیده می‌گیرد.