ناوبری اپلیکیشن
در این داکیومنت، قدمبهقدم نحوهٔ طراحی و سفارشیسازی Navigation در Applin Studio را بررسی میکنیم.
با دنبال کردن این راهنما به طور کامل یاد میگیرید چطور ناوبار را فعال کنید، استایل آن را تغییر دهید و آیتمهای داخل آن را مدیریت کنید.
فعالسازی نوار ناوبری
نوار ناوبری فقط در صفحات سطح اصلی قابل استفاده است؛ یعنی صفحاتی که میتوانند نقش صفحهٔ اصلی اپلیکیشن را ایفا کنند.
این صفحات شامل:
- Main
- Profile
- Listing
- Web
- و سایر صفحاتی که نقش صفحهٔ اصلی دارند
سایر صفحات از ناوبری پشتیبانی نمیکنند.
برای فعالسازی آن کافیست در صفحهٔ موردنظر، فیلد AppNav.Show را روشن کنید.
به محض روشن شدن، نوار ناوبری پایین صفحه نمایش داده میشود.
مشخصات فیلد
| Field | Type | Default Value | Description |
|---|---|---|---|
| AppNav.Show | Boolean | false | فعال یا غیرفعال کردن نوار ناوبری |
ویرایش استایل نوار ناوبری
Applin Studio امکانات متنوعی برای شخصیسازی ظاهر نوار ناوبری در اختیار شما قرار میدهد.
میتوانید رنگ پسزمینه، شدت سایه، انحنای گوشهها، فاصلهها و ظاهر متنی را تنظیم کنید — حتی اندازهٔ لوگو هر آیتم.
این تنظیمات به شما اجازه میدهد ناوبریای بسازید که دقیقاً مطابق هویت بصری برند یا تم ظاهری اپلیکیشنتان باشد.
فیلدهای استایل
| Field | Type | Default Value | Description |
|---|---|---|---|
| Color | Color | {color} | رنگ پسزمینهٔ نوار ناوبری |
| Elevation | Number | 0 | میزان سایه و برجستگی |
| Radius | Number | 0 | میزان گردی گوشههای نوار ناوبری |
| Margin | Number | 20 | فاصلهٔ بیرونی (تمام جهات) |
| MarginLine | Number | 10 | فاصلهٔ پایین نوار از لبهٔ صفحه |
| Text.Color | Color | {textColor} | رنگ متن آیتمها |
| Text.Size | Number | 16 | اندازه فونت متن آیتمها |
| Text.Style | TextStyle | {textStyle} | استایل متن (بولد، ایتالیک، مدیوم و...) |
| Logo.Size | Number | 32 | اندازهٔ لوگو/آیکن آیتمها |
این استایلها به صورت کلی روی تمام آیتمها اعمال میشوند.
با این حال برای هر آیتم بهصورت جداگانه هم میتوانید استایل متفاوت تعریف کنید.
ویرایش آیتمهای ناوبری
ناوبری شامل چندین آیتم است که هر کدام نمایانگر یک مقصد یا اکشن هستند.
برای ویرایش هر آیتم، کافیست روی آن کلیک کنید.
بعد از کلیک، یک منوی کنترلی باز میشود:
دستورات و کنترلهای آیتم ناوبری
- Add Item — افزودن آیتم جدید
- Edit Item — باز کردن ویرایشگر کامل
- Edit Item (Fast) — ویرایش سریع آیتم
- Back to Start — انتقال آیتم به ابتدای لیست (چپ/راست بسته به جهت اپ)
- Send to End — انتقال آیتم به انتهای لیست
- Duplicate Item — تکثیر یک آیتم
- Delete Item — حذف آیتم به طور کامل
با این گزینهها میتوانید چیدمان، ظاهر و عملکرد ناوبری را کاملاً تحت کنترل بگیرید.
ویرایش کامل آیتم ناوبری (Full Edit Mode)
در حالت ویرایش کامل، میتوانید تمام ویژگیهای آیتم را تغییر دهید:
از جمله متن، آیکن، رنگها، رفتار در حالت فعال یا Hover، و دستورات کلیکی.
مشخصات کامل هر آیتم
| Field | Type | Default Value | Description |
|---|---|---|---|
| Logo | Logo | {logo} | آیکن یا لوگوی اصلی آیتم |
| Logo.Hover | Logo | {logoHover} | آیکن در حالت Hover یا فعال |
| Logo.Size | Number | 32 | اندازهٔ آیکن |
| Text | String | {text} | متن آیتم |
| Text.Color | Color | {textColor} | رنگ متن |
| Text.Size | Number | 16 | اندازهٔ فونت |
| Text.Style | TextStyle | {textStyle} | استایل متن |
| CurrentPage | PageNumber | {pageName} | مشخص کردن صفحهٔ فعال آیتم |
| URL | URL | {url} | آدرس صفحهای که آیتم هدایت میکند |
| OnClick | Array |
[] | لیست دستورات هنگام کلیک روی آیتم |
این بخش برای ساخت ناوبری هوشمند، آیتمهای فعال با رنگ متفاوت، یا آیتمهایی که دستورات خاص اجرا میکنند بسیار کاربردی است.
ویرایش سریع آیتم (Fast Edit Mode)
اگر فقط میخواهید تغییرات سریع انجام دهید، گزینهٔ Edit Item (Fast) بهترین گزینه است.
در این حالت فقط میتوانید:
- آیکن
- متن
را با سرعت بالا ویرایش کنید.
این روش برای زمانی ایدهآل است که بخواهید چند آیتم مشابه را پشت سر هم ویرایش کنید.
تغییر موقعیت آیتمها
برای جابهجایی آیتمها از دو گزینه استفاده میشود:
- Send to End
- Back to Start
عملکرد آن بسته به جهت اپ:
برای اپهای چپبهراست (LTR):
- Back to Start → انتقال آیتم به سمت چپ
- Send to End → انتقال آیتم به سمت راست
برای اپهای راستبهچپ (RTL):
- عملکرد کاملاً برعکس میشود.
این قابلیت اجازه میدهد ساختار ناوبری را بهصورت دقیق و آیتمبهآیتم کنترل کنید.
تکثیر آیتم (Duplicate Item)
با Duplicate Item میتوانید یک آیتم را عیناً کپی کنید.
این گزینه برای ساخت آیتمهای مشابه (مثل چند تب یکسان) بسیار کاربردی است؛
کافیست یک آیتم درست کنید → Duplicate کنید → فقط متن یا آیکن را تغییر دهید.
حذف آیتم
برای حذف کامل یک آیتم، گزینهٔ Delete Item را انتخاب کنید.
آیتم بلافاصله حذف شده و لیست ناوبری بهروزرسانی میشود.
🔗 منابع بیشتر
برای یادگیری نحوه توسعه AppNav با استفاده از کدنویسی JSON به لینک زیر مراجعه کنید: