Visual Bellv1.0.0
نوار فشردهٔ تک‌خطی برای خبری کوتاه که کار کاربر را قطع نمی‌کند، مثل «فایل شما دریافت شد». رنگ معنا را می‌رساند، آیکونِ پر نوع را نشان می‌دهد و در صورت نیاز یک دکمهٔ کنش و دکمهٔ بستن در انتها می‌نشیند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/visual-bell.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/visual-bell.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/visual-bell.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/visual-bell.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { VisualBell } from "@/components/ui/visual-bell"
<VisualBell color="warning" dismissible action={{ label: "بیشتر بدانید", onClick: openHelp }}>
فایل مورد نظر یافت نشد.
</VisualBell>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
نوار از چهار بخش پشت‌سرهم ساخته می‌شود: آیکون، متن، کنش و بستن. فقط متن الزامی است؛ بقیه با icon، action و dismissible روشن می‌شوند و هر بخش با خطِ جداکننده از قبلی جدا می‌ماند. کنش زمینهٔ تیره‌تر می‌گیرد تا دکمه بودنش دیده شود.
رنگ‌ها همان شش رنگ Alert هستند (default، primary، info، success، warning، destructive). جداکننده و زمینهٔ تیره‌تر از خودِ رنگ ساخته می‌شوند، پس با تغییر تم یا برند بی‌دردسر عوض می‌شوند. اگر خبر چند خط توضیح یا عنوان دارد، به‌جای نوار از Notification یا Alert استفاده کنید.
دسترس‌پذیری
- نوار role=status دارد و صفحه‌خوان آن را بدون قطعِ کاربر می‌خواند؛ رنگِ destructive از role=alert استفاده می‌کند تا فوری اعلام شود.
- رنگ تنها حاملِ معنا نیست؛ هر رنگ آیکونِ مخصوص خودش را دارد (اطلاع، تیک، مثلثِ هشدار، علامتِ خطا) و متن هم نوع را می‌گوید.
- دکمه‌های کنش و بستن دکمهٔ واقعی‌اند و با Tab و Enter کار می‌کنند؛ دکمهٔ بستن برچسبِ «بستن» دارد و آیکون برای صفحه‌خوان پنهان است.
- جفتِ رنگِ پس‌زمینه و متنِ هر رنگ از توکن‌های کنترل‌شدهٔ تم می‌آید و در هر دو تم روشن و تیره کنتراستِ خوانا دارد.
مرجع API
VisualBell
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| color | "default" | "primary" | "info" | "success" | "warning" | "destructive" | "default" | رنگِ معنایی نوار؛ آیکونِ پیش‌فرض هم از روی آن انتخاب می‌شود. |
| radius | "none" | "sm" | "md" | "lg" | "full" | "lg" | گردیِ گوشه‌ها. |
| icon | React.ReactNode | false | — | آیکونِ ابتدای نوار؛ ندهید تا آیکونِ پرِ هم‌رنگ بیاید، false یعنی بدون آیکون. |
| action | { label: React.ReactNode; onClick?: (event) => void } | — | دکمهٔ کنش با زمینهٔ تیره‌تر بعد از متن. |
| dismissible | boolean | false | دکمهٔ بستن را در انتها نشان می‌دهد و با کلیک نوار را از DOM برمی‌دارد. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open: boolean) => void | defaultOpen: true | نمایشِ کنترل‌شده یا کنترل‌نشده؛ onOpenChange هنگام بستن با false صدا زده می‌شود. |
| children | React.ReactNode | — | متنِ نوار؛ کوتاه و تک‌خط نگهش دارید. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
Colors
چهار رنگِ اصلی با آیکونِ پرِ مخصوصِ هرکدام؛ primary و info هم برای اطلاع‌رسانیِ برندی یا خنثی هست.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Dismissible
با dismissible دکمهٔ بستن در انتها می‌آید و نوار با کلیک از صفحه حذف می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
With Action
action یک دکمهٔ کنش با زمینهٔ تیره‌تر کنار متن می‌گذارد؛ با dismissible هم ترکیب می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Undo Action
کنش کار واقعی می‌کند: «بازگرداندن» خبر را عوض می‌کند و دوباره زدن می‌بندد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
No Icon
icon={false} آیکونِ ابتدا را برمی‌دارد و متن جایش را می‌گیرد؛ icon هم یک آیکون دلخواه می‌پذیرد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Controlled
با open و onOpenChange، صفحه تصمیم می‌گیرد نوار کِی دیده شود و بعد از بسته‌شدن دوباره نشانش بدهد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| Colors | نوعِ خبر: خنثی، موفق، هشدار یا خطا |
| Dismissible | خبری که کاربر خودش ببندد |
| With Action | پیام با یک قدمِ بعدیِ واضح |
| Undo Action | حذف با امکانِ بازگرداندن |
| No Icon | جایی که آیکون شلوغی است |
| Controlled | صفحه نمایشِ نوار را کنترل می‌کند |
دستورالعمل استفاده
یک جمله، همان‌جا که کاربر هست
انجام بده
پیامِ کوتاهِ نتیجه (دریافت شد، ذخیره شد) را در یک خط بگویید و اگر لازم است یک کنش کنارش بگذارید.
انجام نده
توضیحِ چندجمله‌ای یا پیامِ نیازمند تصمیم در نوار جا نمی‌شود و خوانده نمی‌شود؛ برای آن Notification یا Alert بگذارید.
رنگ با معنای پیام هم‌خوان باشد
انجام بده
خطا را destructive و موفقیت را success کنید تا رنگ و آیکون و متن یک چیز بگویند.
انجام نده
پیامِ خطا با رنگِ success، آیکونِ تیک و متنِ خطا را در تناقض می‌گذارد.