تب — Tab Panel
فیلد Tab Panel برای تقسیم یک فرم طولانی به چند صفحه داخلی یا زبانه استفاده می‌شود. به‌جای نمایش همه بخش‌های فرم در یک صفحه، می‌توان اطلاعات را در زبانه‌هایی مانند مشخصات متقاضی، مدارک و تأیید نهایی سازمان‌دهی کرد و برای هر زبانه رفتار، ظاهر و رویدادهای مستقل در نظر گرفت.
کاربرد Tab Panel در فرم‌های چندبخشی
Tab Panel زمانی کاربرد دارد که فرم از چند بخش مستقل تشکیل شده باشد و نمایش همه فیلدها در یک صفحه، کار با فرم را طولانی یا شلوغ کند. هر بخش می‌تواند در یک زبانه مستقل قرار بگیرد و کاربر بین زبانه‌ها جابه‌جا شود.
ساختار زبانه‌ها و مشخصات هر زبانه
هر Tab Panel می‌تواند یک یا چند زبانه داشته باشد. ایجاد و پیکربندی زبانه‌ها از بخش زبانه (تب)ها انجام می‌شود و هر زبانه مجموعه‌ای از تنظیمات مستقل دارد.
مشخصات هویتی و نمایشی زبانه
برای هر زبانه این مشخصات قابل تنظیم است:
- شناسه (جهت استفاده در CustomJS): برای ارجاع به زبانه در CustomJs استفاده می‌شود. برای مثال، توسعه‌دهنده می‌تواند به زبانه شناسه بدهد و هنگام بارگذاری همان زبانه، عملیات موردنظر را در CustomJs اجرا کند. وقتی جابجایی به صورت Native فعال باشد، این شناسه در URL نیز استفاده می‌شود.
- توضیحات نمایشی: متن اختیاری که با قرار گرفتن ماوس روی زبانه نمایش داده می‌شود.
- عنوان تب: متنی که به‌عنوان عنوان اصلی زبانه نمایش داده می‌شود.
- زیرعنوان تب: متن اختیاری که به‌عنوان زیرعنوان زبانه نمایش داده می‌شود.
- آیکون: آیکون اختیاری که کنار عنوان زبانه قرار می‌گیرد.
کنترل وضعیت و دسترسی زبانه
سه گزینه برای کنترل وضعیت زبانه وجود دارد:
- فقط خواندنی: با فعال‌شدن این گزینه، همه فیلدهای داخل همان زبانه فقط خواندنی می‌شوند.
- مخفی: با فعال‌شدن این گزینه، زبانه نمایش داده نمی‌شود.
- غیر فعال: زبانه نمایش داده می‌شود، اما کاربر نمی‌تواند وارد آن شود.
شخصی‌سازی عنوان، زیرعنوان و آیکون
برای عنوان، زیرعنوان و آیکون هر زبانه، مجموعه تنظیمات مشابهی در دسترس است تا ظاهر هر بخش متناسب با طراحی فرم تنظیم شود.
| بخش | سفارشی‌سازی | رنگ | اندازه |
|---|---|---|---|
| عنوان | سفارشی‌سازی (Custom Style) برای اعمال Style دلخواه | رنگ متن | اندازه متن با مقادیری مانند 16px، 1rem یا inherit |
| زیرعنوان | سفارشی‌سازی (Custom Style) برای اعمال Style دلخواه | رنگ متن | اندازه متن با مقادیری مانند 16px، 1rem یا inherit |
| آیکون | سفارشی‌سازی (Custom Style) برای اعمال Style دلخواه | رنگ | اندازه آیکون با مقادیری مانند 16px، 1rem یا inherit |
سفارشی‌سازی (Custom Style) برای زمانی است که توسعه‌دهنده بخواهد Style دلخواه خود را مستقیماً برای همان بخش تعریف کند. تنظیم رنگ برای تغییر رنگ نمایش و تنظیم اندازه برای تغییر اندازه متن یا آیکون استفاده می‌شود.
رویدادهای زبانه و فراخوانی فیلد دکمه
برای هر زبانه می‌توان یک فیلد دکمه را به رویدادهای زبانه متصل کرد تا هنگام رخ‌دادن رویداد، همان فیلد دکمه فراخوانی شود.
- هنگام فراخوانی رویداد Load: زمانی اجرا می‌شود که زبانه برای اولین بار بارگذاری شود. فیلدهای داخل زبانه در ابتدای بارگذاری فرم لود نمی‌شوند و زمانی بارگذاری می‌شوند که کاربر وارد آن زبانه شود؛ بنابراین رویداد Load در اولین ورود کاربر به زبانه اجرا می‌شود.
- هنگام فراخوانی رویداد قبلی: زمانی اجرا می‌شود که کاربر از زبانه فعلی به زبانه قبلی برود.
- هنگام فراخوانی رویداد بعدی: زمانی اجرا می‌شود که کاربر از زبانه فعلی به زبانه بعدی برود.
کنترل سربرگ، اقدامات و نوار پیشرفت
بخش تنظیمات عناصر سه گروه اصلی برای کنترل نمایش زبانه‌ها، اقدامات و نوار پیشرفت دارد.
سربرگ زبانه‌ها و رنگ وضعیت‌ها
در تنظیمات سربرگ زبانه‌ها می‌توان نمایش و ظاهر سربرگ را کنترل کرد:
- نمایش سربرگ تب‌ها: اگر فعال باشد، سربرگ زبانه‌ها به کاربر نمایش داده می‌شود؛ در غیر این صورت سربرگ نمایش داده نمی‌شود.
- نمایش به صورت افقی / عمودی: نحوه قرارگیری زبانه‌ها را به‌صورت افقی یا عمودی تعیین می‌کند.
- رنگ تب «تکمیل شده»: رنگ زبانه‌های تکمیل‌شده را تعیین می‌کند. اگر مقداری انتخاب نشود، رنگ از Theme سامانه خوانده می‌شود.
- رنگ تب «درحال تکمیل»: رنگ زبانه جاری، یعنی زبانه‌ای که کاربر در حال حاضر در آن قرار دارد، را تعیین می‌کند. اگر مقداری انتخاب نشود، رنگ از Theme سامانه خوانده می‌شود.
- رنگ تب «تکمیل نشده»: رنگ زبانه‌های بعدی را تعیین می‌کند. اگر مقداری انتخاب نشود، رنگ از Theme سامانه خوانده می‌شود.
- رنگ پس‌زمینه: رنگ پس‌زمینه فیلد تب را تعیین می‌کند.
اقدامات و دکمه‌های قبلی و بعدی
در تنظیمات اقدامات می‌توان نحوه نمایش عملیات پیمایش و ذخیره را مشخص کرد:
- نمایش ذخیره اطلاعات در آخرین گام: مشخص می‌کند دکمه ذخیره فرم برای ارسال داده به سرور در آخرین زبانه قرار بگیرد یا خیر. اگر این گزینه فعال باشد، دکمه ارسال فرم دیگر در فرم اصلی قرار نمی‌گیرد.
- نمایش دکمه‌های قبلی و بعدی: مشخص می‌کند دکمه‌های پیمایش قبلی و بعدی نمایش داده شوند یا خیر.
برای هر یک از دکمه‌های قبلی و بعدی، تنظیمات جداگانه‌ای در همین بخش قابل پیکربندی است.
نمایش و رنگ نوار پیشرفت
در تنظیمات نوار پیشرفت این موارد قابل کنترل است:
- نمایش نوار پیشرفت: با فعال‌شدن این گزینه، نوار پیشرفت نمایش داده می‌شود؛ در غیر این صورت نمایش داده نمی‌شود.
- رنگ نوار پیشرفت: رنگ نوار پیشرفت را تعیین می‌کند. اگر مقداری انتخاب نشود، رنگ Theme سامانه استفاده می‌شود.
کنترل رفتار کلی Tab Panel
تنظیمات عمومی Tab Panel ترتیب نمایش عناصر و چند رفتار مهم هنگام جابه‌جایی بین زبانه‌ها را کنترل می‌کند.
ترتیب نمایش عناصر
اولویت عناصر ترتیب قرارگیری اجزای Tab Panel را تعیین می‌کند. عناصر قابل مرتب‌سازی عبارت‌اند از:
- سربرگ زبانه‌ها
- اقدامات بالا
- محتوای اصلی
- اقدامات پایین
- نوار پیشرفت
هر ترتیبی که برای این عناصر انتخاب شود، همان ترتیب در Tab Panel نمایش داده خواهد شد. رنگ پس‌زمینه نیز رنگ پس‌زمینه کلی تب را تعیین می‌کند.
اعتبارسنجی، جابه‌جایی Native و ذخیره موقت
- فعالسازی اعتبارسنجی هر تب: هنگام رفتن به زبانه بعدی، Validation زبانه جاری بررسی می‌شود. اگر خطای Validation وجود داشته باشد، کاربر اجازه رفتن به زبانه بعدی را نخواهد داشت.
- جابجایی به صورت Native: با فعال‌شدن این گزینه، شناسه زبانه فعال در URL نمایش داده می‌شود و زبانه جاری به URL صفحه متصل می‌شود. در این حالت، جابه‌جایی با دکمه Back مرورگر یا گوشی موبایل نیز امکان‌پذیر است.
- ذخیره موقت: با فعال‌شدن این گزینه، هر بار که کاربر به زبانه بعدی می‌رود، داده‌های فرم در Database ذخیره می‌شود؛ به شرط آنکه همه Validationهای سمت سرور رعایت شده باشند. برای مثال، فیلدهایی که در Database اجباری هستند نباید خالی باشند.
نکته: در حالت جابجایی به صورت Native، شناسه‌ای که برای زبانه تعریف شده است در URL نیز استفاده می‌شود.
تنظیم خط حاشیه
بخش خط حاشیه (Border) برای کنترل Border اطراف Tab Panel استفاده می‌شود.
- فعالسازی خط حاشیه: اگر فعال باشد، Border نمایش داده می‌شود؛ در غیر این صورت خط حاشیه نمایش داده نمی‌شود.
- رنگ: فقط زمانی نمایش داده می‌شود که فعالسازی خط حاشیه روشن باشد و رنگ Border را تعیین می‌کند.
- عرض (px): فقط در حالت فعال‌بودن خط حاشیه نمایش داده می‌شود و ضخامت Border را تعیین می‌کند.
- نوع نمایش: فقط در حالت فعال‌بودن خط حاشیه نمایش داده می‌شود و Style خط حاشیه را مشخص می‌کند. گزینه‌های این بخش شامل خطی، نقطه‌ای و خط‌تیره‌ای است.
نمونه کاربردی
برای یک فرم طولانی می‌توان اطلاعات را در سه زبانه مشخصات متقاضی، مدارک و تأیید نهایی تفکیک کرد. در این ساختار، هر زبانه عنوان و تنظیمات مستقل خود را دارد و می‌توان نمایش سربرگ، دکمه‌های قبلی و بعدی، نوار پیشرفت، Validation هر زبانه و ذخیره موقت را متناسب با نیاز فرم پیکربندی کرد.