سکشن Section

سکشن (Section) بنیادی‌ترین واحد سازنده‌ی رابط کاربری در سرخآب است. این کامپوننت نه تنها یک ظرف (Container)، بلکه ابزار اصلی برای سلسله‌مراتب محتوایی و ناوبری بصری است. تمام منطقِ چیدمان در پنل آروان بر پایه‌ی تفکیکِ وظایف توسط سکشن‌ها بنا شده است.

نمونه زنده

تنظیمات شبکهSelect option

کپشن

اکشن‌ها

تنظیمات شبکه

توضیح کوتاه برای راهنمایی کاربر در این سکشن.

این بدنه سکشن است. می‌توانید هر محتوایی مانند فرم، جدول یا متن ساده را اینجا قرار دهید.

فلسفه

در سرخآب، هر صفحه از ترکیب یک یا چند سکشن تشکیل می‌شود. هدف از استفاده از سکشن:

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

آناتومی

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

1

2

عنوان نمونه 3

4

جدیدآزمایشی5

توضیحات کانتینر که در زیر تیتر قرار گرفته و اطلاعات اضافه‌ای درمورد محتویات کانتینر به کاربر می‌دهد. 6

7

8

من رو جایگزین کنSwap me

1. 1Header
2. 2Topic Icon
3. 3Title
4. 4Knowledge Links
5. 5Status Badges
6. 6Caption
7. 7Actions Slot
8. 8Body

1. هدر: بخش بالایی سکشن است و نقش یک نوار ابزار محلی را ایفا می‌کند؛ شامل هویت محتوا، لینک‌های دانش، نشانگرهای وضعیت و اکشن‌ها.
2. آیکون موضوعی: آیکون اختیاری در ابتدای هدر است که موضوع سکشن را به‌شکل بصری شناسایی می‌کند.
3. عنوان: متن اصلی سکشن (T3) که موضوع یا کاربرد محتوای داخل آن را بیان می‌کند.
4. میان‌برهای دانش: آیکون‌های استاندارد برای داک فنی (Technical) و محصولی (Product) که پل ارتباطی کاربر با مرکز آموزش هستند.
5. نشانگرهای وضعیت: بِج‌هایی مثل جدید، آزمایشی یا کاستوم شده که در سمت چپ عنوان نمایش داده می‌شوند تا چشم کاربر کمتر جابه‌جا شود.
6. کپشن: توضیح کوتاه و اختیاری زیر عنوان که اطلاعات تکمیلی درباره محتوای سکشن ارایه می‌دهد.
7. بخش اکشن‌ها: فضای رزرو شده برای دکمه‌های Primary، Secondary یا Icon Buttons که در انتهای هدر قرار می‌گیرد.
8. بدنه: اسلات باز محتوای اصلی سکشن که می‌تواند یک Table، فرم چندستونی یا حتی Empty State را میزبانی کند.

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

بایدها

• درصورت وجود تنظیمات پیچیده، حتمن از کپشن برای توضیح کوتاه زیر عنوان استفاده کنید.
• اگر سکشن حاوی فرم است، دکمه‌های ثبت فرم را در انتهای Body قرار دهید، نه در هدر.

نبایدها

• Nesting: هرگز یک سکشن را داخل سکشن دیگر قرار ندهید (این کار باعث شکستن سایه‌ها و لایه‌های بصری می‌شود).
• Overcrowding: از قرار دادن بیش از ۲ یا ۳ اکشن در هدر سکشن خودداری کنید (بقیه را در منوی "بیشتر" قرار دهید).
• Icon Overuse: اگر برای یک سکشن آیکون انتخاب کردید، بهتر است تمام سکشن‌های آن صفحه نیز آیکون داشته باشند تا نظم بصری حفظ شود.

موبایل

• Padding: فاصله داخلی از 24px به 16px کاهش می‌یابد.
• Header Wrap: در صورتی که عنوان و اکشن‌ها در یک خط جا نشوند، اکشن‌ها به زیر عنوان منتقل می‌شوند.