پرش به مطلب اصلی

ویجت تولبار (نوار بالا)

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

کاربردها

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

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

فرم تنظیمات تولبار
در این بخش تصویر فرم تنظیمات «تولبار» را قرار دهید (اسکرین‌شات از پنل اپ‌ادیتور).

تنظیمات اصلی

عنوان و ظاهر تولبار

  • عنوان تولبار: متنی است که در نوار بالا نمایش داده می‌شود؛ معمولاً نام صفحه یا بخش فعلی.
  • فونت تولبار و سایز عنوان: ظاهر عنوان را تنظیم می‌کند.
  • رنگ عنوان: رنگ متن عنوان.
  • رنگ زمینه: رنگ پس‌زمینه نوار بالا.
  • رنگ آیکون: رنگ آیکون‌های تولبار مثل جستجو یا علاقه‌مندی‌ها.
  • سایه: میزان برجستگی یا سایه زیر تولبار را مشخص می‌کند.

دکمه‌های تولبار

  • نمایش دکمه جستجو: اگر فعال باشد، آیکون جستجو در تولبار نمایش داده می‌شود.
  • نمایش دکمه علاقه‌مندی‌ها: اگر فعال باشد، دکمه علاقه‌مندی‌ها در تولبار نمایش داده می‌شود.
  • آیکون حالت اضافه شده به علاقه‌مندی‌ها: آیکون زمانی که صفحه در علاقه‌مندی‌ها هست.
  • آیکون حالت حذف شده از علاقه‌مندی‌ها: آیکون زمانی که صفحه هنوز به علاقه‌مندی‌ها اضافه نشده است.

نکته

  • عنوان تولبار را کوتاه نگه دارید تا در موبایل کامل دیده شود.
  • اگر زمینه تولبار تیره است، رنگ عنوان و آیکون‌ها را روشن انتخاب کنید و برعکس.
  • دکمه‌های تولبار را فقط برای کارهای مهم صفحه فعال کنید تا نوار بالا شلوغ نشود.

رنگ‌آمیزی آیکون علاقه‌مندی

اگر آیکون‌های علاقه‌مندی تولبار را از فایل SVG انتخاب کرده باشید، دو تنظیم جداگانه نمایش داده می‌شود: رنگ‌آمیزی آیکون اضافه‌شده و رنگ‌آمیزی آیکون حذف‌شده. رنگ هر حالت را می‌توانید مستقل تغییر دهید یا به رنگ‌های تم وصل کنید.

این تنظیم‌ها فقط وقتی نمایش داده می‌شوند که قابلیت علاقه‌مندی تولبار فعال باشد.

جزئیات در رنگ‌آمیزی آیکون SVG آمده است.


نکات طراحی و تست

  • جایگاه «ویجت تولبار (نوار بالا)» را در چیدمان صفحه با اندازه‌های مختلف نمایش بررسی کنید.
  • عنوان، متن و فاصله‌گذاری اطراف ویجت را با سایر اجزای همان صفحه هماهنگ نگه دارید.
  • قبل از انتشار، تعامل کاربر با ویجت را روی دستگاه واقعی تست کنید؛ مخصوصاً اگر ویجت داخل گروه، تب، اسلاید یا فرم قرار دارد.