AppNav سیستم ناوبری اپلیکیشن را تعریف میکند. این بخش شامل تنظیمات ظاهری نوار ناوبری و فهرست آیتمهای ناوبری است. توسعهدهندگان میتوانند ظاهر، ساختار و رفتار ناوبری را از طریق این تنظیمات شخصیسازی کنند.
| فیلد | نوع | مقدار پیشفرض | توضیحات |
|---|---|---|---|
| Style | AppNavStyle | {} | تنظیمات ظاهری نوار ناوبری |
| Items | Array |
[] | فهرست آیتمهای ناوبری (AppNav Item objects) |
نمونه کدنویسی:
{
"AppNav": {
"Style": {},
"Items": []
}
}مشخصکننده ویژگیهای بصری و تایپوگرافی نوار ناوبری است، شامل رنگ پسزمینه، ارتفاع سایه، گردی گوشهها، فاصلهها، ظاهر متن و اندازه لوگو.
| فیلد | نوع | مقدار پیشفرض | توضیحات |
|---|---|---|---|
| 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} | سبک متن (مثلاً bold یا italic) |
| Logo.Size | Number | 32 | اندازه لوگو در نوار ناوبری |
نمونه کدنویسی:
{
"AppNav": {
"Style": {
"Color": "{color}",
"Elevation": 0,
"Radius": 0,
"Margin": 20,
"MarginLine": 10,
"Text.Color": "{textColor}",
"Text.Size": 16,
"Text.Style": "{textStyle}",
"Logo.Size": 32
},
"Items": []
}
}مشخصات هر آیتم در سیستم ناوبری را تعیین میکند، شامل لوگو، لوگوی حالت Hover، متن برچسب، رنگ و اندازه متن، صفحه فعال کنونی، لینک مقصد و اکشنهایی که هنگام کلیک اجرا میشوند.
| فیلد | نوع | مقدار پیشفرض | توضیحات |
|---|---|---|---|
| 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} | سبک متن (مثلاً bold یا italic) |
| CurrentPage | PageNumber | {pageName} | صفحه فعلی برای مشخصکردن آیتم فعال |
| URL | URL | {url} | آدرس مقصد برای انتقال |
| OnClick | Array |
[] | مجموعه دستوراتی که هنگام کلیک اجرا میشوند |
نمونه کدنویسی:
{
"Logo": "{logo}",
"Logo.Hover": "{logoHover}",
"Logo.Size": 32,
"Text": "{text}",
"Text.Color": "{textColor}",
"Text.Size": 16,
"Text.Style": "{textStyle}",
"CurrentPage": "{pageName}",
"URL": "{url}",
"OnClick": []
}برای دیدن نحوه طراحی AppNav در Applin Studio (بدون نیاز به کدنویسی) به لینک زیر مراجعه کنید: