تم تاریک

کارت Card ​

کامپوننت Card یک کانتینر تعاملی و انعطاف‌پذیر است که برای دسته‌بندی محتوا، نمایش گزینه‌های قابل انتخاب (Selection) و اجرای اکشن‌های کلیکی استفاده می‌شود. برخلاف کارت‌های سنتی که دارای ساختار سخت و ثابت (مثل تصویر، هدر و فوتور اجباری) هستند، این کامپوننت کاملا بر پایه اسلات (Slot Pattern) طراحی شده است، به این معنی که هیچ الگوی محتوایی پیش‌فرضی درون خود ندارد و تمامی محتوای داخلی آن توسط طراح/توسعه دهنده تزریق می‌شود.

نمونه زنده ​

tertiarySelect option

عنوان کارت

محتوای اسلات که توسط محصول تزریق می‌شود.

آناتومی ​

کارت صرفا نقش یک پوشش‌دهنده تعاملی (Interactive Wrapper) را ایفا می‌کند و ساختار آن شامل بخش‌های زیر است.

با هاور روی شماره‌های روی کارت (یا آیتم‌های لیست کنار آن)، هر بخش برجسته می‌شود.

عنوان کارت

فضای آزاد اسلات برای تزریق هر نوع محتوا.

  1. 1Container
  2. 2Content Slot
  3. 3Selection Indicator
  1. کانتینر اصلی (Container): ظرف بیرونی کارت که مرزها، لایه‌ها، انیمیشن‌ها و حالات کلیک/انتخاب را مدیریت می‌کند.
  2. اسلات محتوا (Content Slot): یک فضای کاملا آزاد در مرکز کارت که پذیرای هر نوع کامپوننت یا چیدمانی (مانند آیکون، متن، تگ، رادیو باتن یا فیلدهای ورودی) است.
  3. نشانگر انتخاب (Selection Indicator - اختیاری): تغییر بصری بردر پس‌زمینه (و در صورت نیاز آیکون تیک/رادیو) برای اعلام وضعیت انتخاب‌شده (Selected).

ساختار ​

از آنجا که محتوای داخل کارت متغیر است، رعایت استانداردهای کانتینر اصلی برای حفظ یکپارچگی صفحات اهمیت بالایی دارد.

با هاور روی بخش‌های کارت (یا روی آیتم‌های لیست زیر آن)، اندازه‌ی مرتبط با هر بخش نمایش داده می‌شود.

عنوان کارت

اندازه‌های کانتینر روی همین کارت tertiary مشخص می‌شود.

  1. 16pxPadding
  2. 8pxCorner Radius
  3. 1pxBorder Width
  4. 2pxSelected Border
  5. AllAll Sizes

۱. انحنا ​

  • انحنای لبه‌ها (Border Radius): مقدار پیش‌فرض Radius-SM (معادل 8px)
  • ضخامت بردر:
    • حالت عادی (Unselected): مقدار 1px با رنگ نیوترال ملایم (pt-t1-st5-neutral).
    • حالت انتخاب‌شده (Selected): مقدار 2px با رنگ اصلی برند (pt-t1-st1-info).

۲. پدینگ ​

پدینگ کامپوننت‌های کارت space-4 معادل 16px است

الگوهای مصرف ​

با توجه به قابلیت دریافت اسلات، کارت را می‌توان در سناریوهای تعاملی مختلفی مصرف کرد:

۱. کارت انتخاب تک‌گزینه‌ای ​

کاربر فقط می‌تواند یک کارت را از بین چند گزینه انتخاب کند (مانند انتخاب روش پرداخت یا انتخاب منطقه جغرافیایی دیتاسنتر).

۲. کارت انتخاب چندگزینه‌ای ​

کاربر می‌تواند هم‌زمان چند کارت را انتخاب یا از حالت انتخاب خارج کند (مانند انتخاب ویژگی‌ها یا سرویس‌های جانبی سرور).

۳. کارت اکشن/لینک ​

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

۵. راهنمای استفاده ​

بایدها ​

  • ترازبندی محتوای اسلات: محتوایی که داخل اسلات تزریق می‌کنید را کاملا منظم و ترجیحا با سیستم‌های Flexbox/Grid چیدمان کنید.
  • وضوح در حالت Selected: حتما از کنتراست کافی در حالت انتخاب‌شده استفاده کنید تا کاربر در نگاه اول کارت‌های فعال را تشخیص دهد.
  • استفاده از المان‌های فرم در اسلات: اگر کارت حالت انتخابی دارد، بهتر است یک کامپوننت Radio یا Checkbox نیز در داخل اسلات (گوشه بالا) قرار دهید تا دسترسی‌پذیری بصری تقویت شود.

نبایدها ​

  • تودرتویی اکشن‌ها (Nested Actions): از قرار دادن دکمه‌ها یا لینک‌های تعاملی متعدد در داخل کارتی که خودش کلیک‌پذیر است خودداری کنید، این کار باعث خطای کلیک (Accidental Clicks) می‌شود.
  • تغییر ابعاد در حالت انتخاب: در حالت Selected به جای افزایش پدینگ، فقط ضخامت بردر را تغییر دهید تا جابجایی بصری (Layout Shift) در محتوای اسلات رخ ندهد.