تم تاریک

ساید پنل Side Panel ​

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

نمونه زنده ​

smSelect option

چرا ساید پنل ​

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

مزایای استراتژیک ساید پنل:

  • حفظ رشته‌ی افکار: کاربر همچنان می‌تواند بخشی از صفحه اصلی (مثال ردیف جدولی که روی آن کلیک کرده) را در کنار پنل ببیند.
  • فضای عمودی نامحدود: به دلیل استفاده از اسکرول داخلی، برای فرم‌های طولانی و چند بخش مناسب است.
  • تحملِ اکشن‌های متعدد: هدر و فوتور فیکسِ آن اجازه می‌دهد اکشن‌های پیچیده، دکمه‌های بازگشت و تب‌ها به راحتی سازماندهی شوند.

آناتومی ​

با هاور روی بخش‌ها (یا آیتم‌های لیست)، هر قسمت مشخص می‌شود.

تنظیمات پیشرفته دیسک
پیکربندی ذخیره‌سازی و دسترسی
  1. 1Overlay
  2. 2Header
  3. 3Title
  4. 4Caption
  5. 5Close Button
  6. 6Body
  7. 7Footer
  8. 8Primary CTA
  9. 9Cancel Button
  1. پوشش پس‌زمینه (Overlay): لایه نیمه‌شفاف روی صفحه اصلی که تمرکز را به ساید پنل می‌برد؛ در صورت نیاز کلیک‌پذیر است.
  2. هدر: بخش بالایی ثابت پنل که عنوان، کپشن و دکمه بستن را در خود دارد.
  3. عنوان: تیتر اصلی پنل که هدف یا موضوع آن را بیان می‌کند.
  4. کپشن: متن کوتاه اختیاری زیر عنوان برای توضیح تکمیلی.
  5. دکمه بستن: دکمه X برای بستن پنل بدون انجام اقدام اصلی.
  6. بدنه: بخش تعویض‌پذیر (Swap Slot) با اسکرول مستقل؛ فرم‌ها، تنظیمات یا جزئیات اینجا قرار می‌گیرند.
  7. فوتور: نوار پایینی ثابت که اکشن‌های اصلی و فرعی را میزبانی می‌کند.
  8. اقدام اصلی: دکمه اصلی مثل ذخیره یا تایید.
  9. دکمه انصراف: دکمه ثانویه برای بستن پنل یا لغو عملیات.

ساختار ​

ساید پنل برای مدیریت بهینه فضا، از یک ساختار سه‌بخشی (هدر فیکس، بدنه اسکرول‌شونده و فوتور فیکس) با توکن‌های فاصله‌گذاری دقیق استفاده می‌کند.

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

تنظیمات پیشرفته دیسک
پیکربندی ذخیره‌سازی و دسترسی
  1. 24pxHeader Padding
  2. 0pxTitle/Caption Gap
  3. 16pxHeader Gap
  4. 32pxClose Button Size
  5. 24pxBody Padding
  6. 24pxBody Section Gap
  7. 24pxFooter Padding
  8. 8pxFooter Buttons Gap
  9. 40pxButton Height
  10. 480pxPanel Width (sm)
  11. 720pxPanel Width (md)
  12. 50%Overlay Opacity
  13. AllAll Sizes

  • پدینگ داخلی هدر: مقدار 24px از بالا، چپ و راست تا فضای کافی برای دکمه خروج و عنوان فراهم شود.

  • فاصله عمودی عنوان تا کپشن: جهت هماهنگی تیتر و کپشن با دکمه بستن، فاصله تیتر و کپشن 0px گذاشته شده است.

  • پدینگ پیش‌فرض بدنه: مقدار 24px از تمامی جهات (Padding: 24px).

  • گپ بین بخش‌ها (Gap): در صورت استفاده از چند فرم یا سکشن بدون هدر در داخل بدنه، فاصله عمودی بین آن‌ها باید طبق توکن Spacing-6 (معادل 24px) مدیریت شود.

  • پدینگ داخلی فوتور: پدینگ فوتر از تمامی جهات، مانند هدر با فاصله 24pxاست

  • تراز دکمه‌های اکشن: دکمه‌های عملیاتی در پایین پنل با ارتفاع استاندارد کامپوننت دکمه رندر می‌شوند. فاصله (Gap) بین دکمه اکشن اصلی و دکمه انصراف 8px است.

  • شفافیت (Opacity): لایه ماسک پشت ساید پنل دارای رنگ تیره با کد رنگی 000000# و میزان شفافیت (Opacity) 50% است تا کنتراست لازم برای تمرکز روی پنل ایجاد شود.

  • سطوح لایه‌ها (Z-index): مقدار Z-index ساید پنل و اورلی آن باید بالاتر از هدر اصلی صفحه و سایدبار محصولی تنظیم شود تا کاملاً روی آن‌ها را بپوشاند.

ویژگی‌ها و مشخصات بصری ​

ویژگیمقدار / استایلملاحظات
موقعیتسمت چپ صفحهدر حالت راست‌چین پنل آروان، از سمت چپ باز می‌شود تا با سایدبار محصولی تداخل نداشته باشد.
عرض‌های استانداردsm (480px) | md (720px)بر اساس حجم داده و نوع فرم، طراح عرض مناسب را انتخاب می‌کند.
رفتار اسکرولداخلی (Internal Scroll)هدر و فوتور همیشه ثابت (Sticky) می‌مانند و فقط بدنه اسکرول می‌شود.

راهنمای تعامل و رفتار ​

نحوه باز و بسته شدن ​

  • باز شدن: با یک انیمیشن نرم (Slide-in) از لبه صفحه به سمت داخل.
  • بستن صریح: کلیک روی دکمه X در هدر یا دکمه انصراف در فوتور.
  • بستن ضمنی: کلیک روی فضای Overlay (خارج از پنل). نکته: اگر پنل حاوی فرمی است که کاربر در آن داده وارد کرده، کلیک روی فضای بیرون نباید پنل را ببندد، ابتدا باید یک مودال تایید (تغییرات ذخیره نشده) نمایش داده شود.

مدیریت فوتور و اکشن‌ها ​

فوتور ساید پنل همواره باید چسبان (Fixed) باشد تا کاربر در هر سطحی از اسکرول فرم، به دکمه‌های اصلی دسترسی داشته باشد. ترتیب دکمه‌ها در فوتور طبق استاندارد دیزاین سیستم: دکمه اکشن اصلی در سمت راست و دکمه انصراف در کنار آن قرار می‌گیرد.

بایدها و نبایدها ​

بایدها ​

  • همیشه برای ساید پنل یک عنوان واضح و اکشن‌محور انتخاب کنید (مثال: تنظیمات پیشرفته دیسک به جای تنظیمات).
  • تمرکز کیبورد (Focus Trap) را رعایت کنید، وقتی پنل باز است، دکمه Tab کیبورد باید فقط بین المان‌های داخل پنل جابجا شود.

نبایدها ​

  • تودرتویی ممنوع (No Nesting): هرگز از داخل یک ساید پنل، ساید پنل دیگری را باز نکنید. در صورت نیاز به مرحله‌ی بعد، محتوای داخلی پنل را تغییر دهید یا از مودال روی پنل استفاده کنید.
  • ساید پنل را به یک صفحه کامل تبدیل نکنید، اگر حجم تنظیمات به قدری است که به عرض ۱۰۰٪ نیاز دارد، کاربر را به یک Detail Page مستقل هدایت کنید.

رفتار در موبایل ​

در نمایشگرهای کوچک (موبایل و تبلت)، ساید پنل تغییر رفتار می‌دهد و عرض پنل به ۱۰۰٪ تغییر پیدا می‌کند و تمام صفحه را می‌پوشاند.