ویجت گروه بازشونده
«گروه بازشونده» یک گروه معمولی است که یک چیز اضافه دارد: وضعیت باز یا بسته. این وضعیت را به همه ویجتهای داخلش میرساند تا با لمس یک دکمه، بخشی از محتوا با انیمیشن باز یا جمع شود.
چیدمان این گروه هیچ فرقی با گروه معمولی ندارد؛ عمودی، افقی، لایهای، جدول یا چینش آزاد را خودتان انتخاب میکنید. تنها چیزی که تعیین میکند «چه چیزی دکمه است» و «چه چیزی جمع میشود»، نقشی است که روی خود ویجتها انتخاب میکنید.
کاربردها
- بخش سؤالات متداول (FAQ) که با لمس هر سؤال، پاسخ آن باز میشود
- متن بلند با دکمه «ادامه مطلب» که ابتدا فقط چند خط از آن دیده میشود
- پنل فیلتر یا جزئیات محصول که کاربر در صورت نیاز بازش میکند
- منوی چندسطحی یا فهرست دستهبندی جمعشونده
ساخت گروه بازشونده
از فهرست ویجتها، در بخش گروهها گزینه بازشونده را انتخاب کنید. یک نمونه آماده بهصورت خودکار ساخته میشود:
- یک گروه افقی بهعنوان سربرگ، شامل یک متن عنوان و یک دکمه با آیکن خودکار
- یک گروه بهعنوان محتوا که با باز و بسته شدن جمع میشود
میتوانید این ساختار را هرطور خواستید تغییر دهید؛ چیزی در آن ثابت یا اجباری نیست.
تنظیمات خود گروه
| تنظیم | توضیح |
|---|---|
| در ابتدا باز باشد | گروه هنگام باز شدن صفحه، باز نمایش داده میشود |
| مدت انیمیشن (میلیثانیه) | سرعت باز و بسته شدن؛ پیشفرض ۲۰۰ |
| حفظ وضعیت محتوا در حالت بسته | محتوا در حالت بسته هم در حافظه میماند تا مقدار فیلدها یا موقعیت اسکرول آن از بین نرود |
اگر برای یک محتوا «میزان باز بودن اولیه» بزرگتر از صفر تعیین شده باشد، آن محتوا در حالت بسته هم ساخته میشود و گزینه «حفظ وضعیت محتوا» روی آن اثری ندارد.
نقش ویجتها
هر ویجتی که داخل گروه بازشونده باشد — در هر عمقی — در تنظیمات خودش بخشی به نام «نقش در گروه بازشونده» دارد:
| نقش | چه میکند |
|---|---|
| بدون نقش | ویجت معمولی است و همیشه دیده میشود؛ عنوان بخش هم چیزی جز یک ویجت بدون نقش نیست |
| دکمه باز و بسته کردن | با لمس آن، نزدیکترین گروه بازشونده بالادست باز یا بسته میشود |
| محتوا | با باز و بسته شدن گروه، با انیمیشن جمع یا باز میشود |
میتوانید هر تعداد دکمه و هر تعداد محتوا در هر جای گروه داشته باشید؛ همه محتواها با هم و هماهنگ حرکت میکنند.
تنظیمات نقش دکمه
| تنظیم | توضیح |
|---|---|
| آیکن خودکار به جای محتوای این ویجت | بهجای محتوای خود ویجت، آیکن پیکان رو به پایین نمایش داده میشود |
| رنگ آیکن | رنگ همان آیکن خودکار |
| اندازه آیکن | پیشفرض ۲۴ |
| با باز شدن گروه، نیمدور بچرخد | آیکن هنگام باز شدن ۱۸۰ درجه میچرخد |
چون دکمه یک ویجت معمولی داخل ساختار صفحه است، کادر، پسزمینه و جای آن کاملاً در اختیار شماست. اگر «آیکن خودکار» را خاموش کنید، محتوای خود ویجت (مثلاً متن «نمایش بیشتر») نمایش داده میشود.
تنظیمات نقش محتوا
| تنظیم | توضیح |
|---|---|
| جهت جمع شدن | عمودی (ارتفاع) یا افقی (عرض) |
| میزان باز بودن اولیه | مقدار بزرگتر از صفر یعنی بخشی از محتوا در حالت بسته هم دیده شود |
| واحد | درصد از محتوا یا پیکسل |
| نمایش محو در انتهای محتوای نیمهباز | یک محو گرادیانی در انتهای بخش دیدهشده نشان میدهد که متن ادامه دارد |
| رنگ محو | رنگ همان گرادیان؛ معمولاً همرنگ زمینه صفحه |
| ارتفاع محو | پیشفرض ۳۲ |
برای متنهای بلند، «میزان باز بودن اولیه» را روی مثلاً ۳۰ درصد یا ۸۰ پیکسل بگذارید و «نمایش محو» را روشن کنید. با این کار چند خط اول متن دیده میشود، انتهای آن محو میشود و کاربر با دکمه بقیه متن را باز میکند.
گزینه محو فقط زمانی دیده میشود که «میزان باز بودن اولیه» بزرگتر از صفر باشد؛ در غیر این صورت اثری ندارد.
نمایش نسبت به وضعیت گروه
جدا از نقش، هر ویجت داخل گروه بازشونده میتواند تعیین کند در کدام وضعیت دیده شود:
- همیشه (پیشفرض)
- فقط وقتی گروه بسته است
- فقط وقتی گروه باز است
این گزینه مستقل از نقش است و حتی روی ویجت بدون نقش هم اثر دارد.
دو دکمه جدا بسازید: یکی با متن «بیشتر» و نمایش «فقط وقتی گروه بسته است»، دیگری با متن «کمتر» و نمایش «فقط وقتی گروه باز است». هر دو نقش «دکمه باز و بسته کردن» را بگیرند.
حالت آکاردئون
اگر چند گروه بازشونده کنار هم دارید و میخواهید هر بار فقط یکی از آنها باز بماند، این تنظیم را روی گروه میزبان (گروه معمولی که این گروههای بازشونده داخلش هستند) فعال کنید:
حالت آکاردئون (از میان گروههای بازشونده فقط یکی باز بماند)
با باز شدن هر گروه، بقیه گروههای بازشونده کنارش بسته میشوند. در درخت ویجتها هم برچسب «آکاردئون» کنار گروه میزبان نمایش داده میشود.
در حالت آکاردئون، اگر چند گروه گزینه «در ابتدا باز باشد» را داشته باشند، فقط اولین آنها باز میماند.
این ساختار مناسب بخش سؤالات متداول است: یک گروه عمودی با تیک آکاردئون، و داخل آن چند گروه بازشونده که هرکدام یک سؤال و پاسخ هستند.
کنترل با عملکرد
برای باز و بسته کردن یک گروه بازشونده از جای دیگر صفحه، از عملکرد «باز یا بستن گروه بازشونده» استفاده کنید. کافی است شناسه گروه را وارد کنید و یکی از عملیات سوئیچ، باز کردن یا بستن را انتخاب کنید.
خطاهای رایج
- گروه بدون دکمه: اگر هیچ ویجتی نقش «دکمه باز و بسته کردن» نداشته باشد، کاربر راهی برای باز کردن گروه ندارد. پنل هنگام طراحی این مورد را به شما اطلاع میدهد.
- گروه بدون محتوا: اگر هیچ ویجتی نقش «محتوا» نداشته باشد، باز و بسته شدن هیچ تغییری ایجاد نمیکند.
- انتخاب نقش خارج از گروه بازشونده: نقش و نمایش شرطی فقط داخل یک گروه بازشونده معنا دارند و بیرون از آن نادیده گرفته میشوند.
نکات طراحی و تست
- دکمه را به اندازه کافی بزرگ بگیرید؛ اگر فقط آیکن است، ناحیه لمسی حداقل ۴۸×۴۸ پیکسل مناسب است.
- برای اینکه کاربر متوجه بازشونده بودن بخش شود، آیکن پیکان با چرخش نیمدور کمک زیادی میکند.
- مدت انیمیشن را خیلی زیاد نکنید؛ مقدارهای بین ۱۵۰ تا ۳۰۰ میلیثانیه طبیعیتر به نظر میرسند.
- اگر محتوای بازشونده فرم دارد، «حفظ وضعیت محتوا در حالت بسته» را روشن کنید تا مقدار فیلدها با بسته شدن پاک نشود.
- رفتار باز و بسته شدن را در شبیهساز و روی دستگاه واقعی تست کنید، مخصوصاً وقتی گروه داخل لیست یا تب قرار دارد.