تگ Tag

کامپوننت Tag (برچسب) برای نشانه‌گذاری، دسته‌بندی و فیلتر کردن منابع بر اساس کلیدواژه‌ها یا ویژگی‌های خاص استفاده می‌شود. تگ‌ها برخلاف بج‌ها (Badges)، معمولاً ماهیت تعاملی دارند؛ یعنی کاربر می‌تواند آن‌ها را ایجاد کند، به یک ریسورس اختصاص دهد یا آن‌ها را حذف (Dismiss) کند.

نمونه زنده

غیرفعال

آناتومی

تگ‌ها ساختاری کپسولی دارند و به صورت کلی از اجزای زیر تشکیل می‌شوند:

( تصویر آناتومی یک تگ شامل آیکون پیشین، متن اصلی، و دکمه حذف در سمت چپ با خطوط راهنما)

• متن برچسب (Label): عنوان یا مقدار تگ (مثال: Env: Production یا Ubuntu).
• دکمه حذف (Close/Dismiss Icon): یک آیکون مینیاتوری X در انتهای تگ که به کاربر اجازه می‌دهد برچسب را از منبع یا فیلتر جاری حذف کند.

ساختار

تگ‌ها معمولا به صورت گروهی (Tag Group) در کنار هم قرار می‌گیرند، بنابراین فواصل داخلی و خارجی آن‌ها برای جلوگیری از آشفتگی بصری بسیار مهم است.

( تصویر فنی کامپوننت Tag همراه با جزئیات پدینگ‌ها، ابعاد آیکون‌ها و گپ بین تگ‌ها در یک گروه به پیکسل)

انحنا و ابعاد

• انحنای لبه‌ها (Border Radius): انحنای لبه‌ها به صورت ثابت با ردیوس4px می‌باشد.
• رنگ و پس‌زمینه: دارای یک پس‌زمینه بسیار روشن (Tint) ملایم و یک بردر ظریف 1px است تا روی صفحه سفید سکشن‌ها به خوبی بنشیند.

فواصل داخلی (Internal Spacing)

• پدینگ عمودی (Top/Bottom): مقدار ثابت 4px یا 6px (بسته به سایز تگ).
• پدینگ افقی (Right/Left): مقدار 12px در حالت عادی. اگر تگ دارای آیکون حذف یا آیکون پیشین باشد، پدینگ آن سمت به 8px کاهش می‌یابد.
• فاصله المان‌های داخلی (Gap): فاصله بین آیکون پیشین/پسین با متن برچسب دقیقاً 6px است.
• سایز آیکون حذف: ابعاد آیکون X در انتها 12px * 12px است.

فواصل گروهی (Tag Group Spacing)

زمانی که تگ‌ها در یک مجموعه قرار می‌گیرند، فاصله افقی (Row Gap) بین آن‌ها 8px و فاصله عمودی در صورت شکستن خط (Column Gap) برابر با 8px تنظیم می‌شود.

انواع

تگ‌ها در ۶ ورینت رنگی استاندارد برای تفکیک معنایی دسته‌ها ارائه می‌شوند:

نام ورینت	کاربرد در سیستم تگ‌گذاری	مثال محصولی
Primary	برچسب‌های کلیدی و نیازمند توجه	Plan: Enterprise
Neutral	تگ‌های عمومی، دسته‌بندی‌های عادی و سیستم‌عامل‌ها	OS: Centos | Vpc-1
Danger	برچسب‌های مربوط به محیط‌های حساس یا خطرزا	Env: Production
Info	تگ‌های راهنما یا فیلترهای موقت	Type: Backup
Warning	تگ‌های مربوط به منابع در حال بررسی یا موقت	Status: Staging
Success	برچسب‌های تایید شده یا فیلترهای مثبت	Access: Granted

موارد کاربرد

چه زمانی استفاده کنیم؟

• مدیریت برچسب‌های ریسورس: برای دسته‌بندی سرورها، دیسک‌ها یا دامنه‌ها توسط کاربر (مثال: تگ کردن سرورها بر اساس دپارتمان).
• فیلترهای اعمال شده (Filter Chips): در بالای جداول پیشرفته، برای نشان دادن فیلترهایی که کاربر انتخاب کرده است تا با کلیک روی X آن‌ها را لغو کند.
• فیلدهای ورودی تگ (Tag Input): در فرم‌هایی که کاربر باید چندین مقدار (مثل کلمات کلیدی) را وارد کرده و اینتر بزند.

تفاوت تگ (Tag) با نشان (Badge)

• Tag: کپسولی است، قابلیت حذف شدن تعاملی دارد، کاربر می‌تواند آن را بسازد و معمولا برای دسته‌بندی و فیلترینگ است.
• Badge: مستطیلی یا کپسولی است، کاملا غیرقابل کلیک و ایستا است و صرفا وضعیت سیستم (مثل فعال/غیرفعال) یا یک شمارنده عددی را نشان می‌دهد.

راهنمای استفاده

بایدها

• امکان حذف آسان: در فیلترهای بالای جدول، حتما آیکون X حذف را قرار دهید تا کاربر برای لغو فیلتر مجبور به باز کردن مجدد منو نشود.
• کوتاه بودن متن: متن تگ‌ها باید بسیار کوتاه و کلیدواژه‌ای باشد (حداکثر ۱۲ تا ۱۵ کاراکتر).
• سرریز (Overflow): اگر تعداد تگ‌های یک ریسورس در جدول زیاد شد، تگ‌های اضافی را مخفی کرده و به صورت +3 نمایش دهید که با هوور کردن، باقی تگ‌ها در یک تولتیپ باز شوند.

نبایدها

• از تگ‌ها به عنوان دکمه‌های عملیاتی برای باز کردن مودال یا ثبت فرم استفاده نکنید.

رفتار

• حالت Hover: اگر تگ قابل کلیک یا حذف باشد، با هوور کردن روی آن، رنگ پس‌زمینه کمی تیره تر می‌شود.
• حالت Dismiss (حذف): با کلیک روی آیکون X، تگ باید از مجموعه حذف شده و داده‌های مرتبط فورا بروزرسانی شوند.