تم تاریک
نشان Badge
کامپوننت Badge یا نشان، برای متمایز کردن، دستهبندی، نمایش وضعیت (Status) یا اعلانهای عددی و متنی کوتاه در کنار المانهای دیگر استفاده میشود. این کامپوننت اطلاعاتی بسیار سریع و خلاصه را بدون قطع جریان کاربری به ویژوال صفحه اضافه میکند.
نمونه زنده
فعال
انواع
بج در دیزاین سیستم سرخآب به دو نوع اصلی تقسیم میشود:
بج وضعیت (Badge Status)
یک نشانگر دایرهای کوچک و رنگی بدون متن است که معمولا برای نمایش وضعیتهای زنده و سیستم (مانند روشن/خاموش بودن یا آنلاین/آفلاین بودن یک سرویس) در جداول و لیستها به کار میرود.
بج محتوایی (Badge Content)
ظرفی کپسولی یا مستطیلی است که محتوای متنی یا بصری را در خود جای میدهد. این نوع بج انعطافپذیر بوده و میتواند ترکیبی از حالات زیر باشد:
- فقط متن (Text Only)
- فقط آیکون (Icon Only)
- آیکون + متن (Icon + Text)
ساختار
رعایت فواصل دقیق هندسی در بجها به دلیل ابعاد کوچک آنها بسیار حیاتی است تا خوانایی متن و آیکون حفظ شود.
( تصویر فنی کامپوننت Badge با خطوط راهنما جهت نمایش پدینگهای افقی/عمودی، ابعاد آیکون و انحنای لبهها به پیکسل)
انحنای لبهها
بج از نظر شکل ظاهری در دو ورینت رندر میشود:
- کپسولی (Pill): با مقدار
Radius-cicularکه لبهها کاملاً گرد هستند (بیشترین کاربرد برای برچسبها و شمارندهها). - مستطیلی (Rounded): با مقدار
Radius-sm(معادل4px) برای مواردی که نیاز به ساختار جدیتر یا متمایز وجود دارد.
فواصل داخلی
- پدینگ: مقدار
2pxیا4pxیا8px(بسته به سایز بج). - فاصله آیکون تا متن (Gap): مقدار ثابت
2px. - ابعاد آیکون داخلی: همیشه
20px * 20pxیا16px * 16pxمتناسب با سایز بدنه بج.
ورینتها
بج در ۶ حالت رنگی استاندارد (پلت رنگی سرخآب) برای انتقال کانتکسهای مختلف معنایی ارائه میشود:
| نام ورینت | کاربرد معنایی | مثال محصولی |
|---|---|---|
| Primary | اقدامات اصلی، تمرکز کانون یا ویژگیهای برجسته | بج لایه اصلی یا پلن فعال |
| Neutral | اطلاعات عمومی، مقادیر عددی خنثی یا دستهبندیهای ثانویه | تعداد رکوردهای فرعی |
| Danger | خطاهای بحرانی، تخفیف، منابع متوقفشده یا هشدارهای جدی | وضعیت دیسک پر شده / لغو شده |
| Info | نکات آموزشی، اخبار یا اطلاعات تکمیلی | بج ویژگیهای در حال توسعه |
| Warning | هشدارهای نیازمند توجه یا وضعیتهای در حال تغییر | در حال ساخت (Creating) / تعلیق |
| Success | فرآیندهای موفق، منابع فعال و عملیات تایید شده | فعال (Active) / پرداخت شده |
راهنمای استفاده
بایدها
- ترازبندی متنی: در حالت ترکیبی (آیکون + متن)، آیکون باید در جهت خوانش زبان پنل (سمت راست در حالت فارسی) قرار گیرد.
- محدودیت متن: متن داخل بج باید حداکثر ۱ یا ۲ کلمه باشد (مثلاً "منقضی شده" به جای "این سرویس منقضی شده است").
- موقعیت قرارگیری: بجها را نزدیک به المانی که به آن مربوط هستند (مثال چسبیده به عنوان یک کلوژن یا داخل سلول جدول) قرار دهید.
نبایدها
- از بجها به عنوان دکمه یا المان قابل کلیک اصلی استفاده نکنید، بج ابزار نمایش اطلاعات است نه اجرای اکشن.
- متنهای طولانی را داخل بج کپسولی فورس نکنید، طولانی شدن متن ریتم بصری کپسول را از بین میبرد.
- استفاده همزمان از بج وضعیت (دایره) و بج محتوایی رنگی متفاوت در یک سلول ممنوع است تا تضاد پیام ایجاد نشود.