لیست

صفحات Listing برای نمایش داده‌ها در قالب یک لیست ساختاریافته طراحی شده‌اند. این صفحات معمولاً از ویژگی‌هایی مانند فیلتر کردن، جستجو و آیتم‌های قابل کلیک برای مشاهده جزئیات پشتیبانی می‌کنند. این نوع طراحی به کاربران کمک می‌کند تا به‌راحتی محتوای بزرگ را مرور، سازماندهی و تعامل داشته باشند.

---

صفحه (Page)

این بخش رفتار اصلی یک صفحه Listing را تعریف می‌کند: نوع، نام، رنگ و کاور را مشخص می‌کند، ناوبری را با مسیرها (Routes)، صفحه بعدی (NextPage) و Timeout کنترل می‌کند، مشخص می‌کند که آیا صفحه آخرین مرحله است یا خیر، گزینه‌های نمایش مثل تمام‌صفحه (Fullscreen)، حالت افقی (Landscape) و امکان گرفتن اسکرین‌شات را مدیریت می‌کند و چیدمان و جهت متن را تعیین می‌کند.

فیلد	نوع	مقدار پیش‌فرض	توضیحات
@Type	PageType	"Listing"	نوع صفحه را به عنوان صفحه لیست مشخص می‌کند
Name	PageName	{name}	نام یا عنوان صفحه
Color	Color	{color}	رنگ پس‌زمینه صفحه
Cover	URL	{cover}	تصویر کاور اختیاری برای صفحه
Routes	Array	[]	لیست اسکریپت‌ها یا اقدامات مرتبط با این صفحه
NextPage	Page	0	شناسه صفحه بعدی برای ناوبری
Timeout	Number	0	مدت زمان به ثانیه قبل از ناوبری خودکار
Finish	Boolean	false	مشخص می‌کند که آیا این صفحه پایان یک توالی است یا خیر
FullScreen	Boolean	false	تعیین می‌کند که صفحه در حالت تمام‌صفحه نمایش داده شود
CanLandScape	Boolean	false	اجازه جهت افقی اگر true
CanScreenShot	Boolean	false	اجازه گرفتن اسکرین‌شات توسط کاربر اگر true
Dir	Direction	{dir}	جهت چیدمان صفحه (ltr یا rtl)
Dir.Text	TextDirection	{dir}	جهت متن محتوای صفحه

نمونه کدنویسی:

{
  "@Type": "Listing",

  "Name": "{name}",
  "Color": "{color}",
  "Cover": "{cover}",
  "Routes": [],
  "NextPage": 0,
  "Timeout": 0,
  "Finish": false,
  "FullScreen": false,
  "CanLandScape": false,
  "CanScreenShot": false,
  "Dir": "{dir}",
  "Dir.Text": "{dir}"
}

---

عنوان صفحه (Title)

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

فیلد	نوع	مقدار پیش‌فرض	توضیحات
Title.Show	Boolean	true	نمایش یا مخفی کردن نوار عنوان
Title.Color	Color	{titleColor}	رنگ پس‌زمینه نوار عنوان
Title.Text	String	{titleText}	متن عنوان نمایش داده شده در بالا
Title.Text.Size	Number	16	اندازه فونت متن عنوان
Title.Text.Color	Color	{titleTextColor}	رنگ متن عنوان
Title.Text.Style	TextStyle	{titleTextStyle}	سبک فونت (bold, italic و غیره)
Title.Menu	PageName	{pageName}	نام صفحه منو برای باز شدن از عنوان
Title.Back.Logo	Logo	{backLogo}	آیکون دکمه بازگشت
Title.Menu.Logo	Logo	{menuLogo}	آیکون دکمه منو

نمونه کدنویسی:

{
  "@Type": "Listing",

  "Title.Show": true,
  "Title.Color": "{titleColor}",
  "Title.Text": "{titleText}",
  "Title.Text.Size": 16,
  "Title.Text.Color": "{titleTextColor}",
  "Title.Text.Style": "{titleTextStyle}",
  "Title.Menu": "{pageName}",
  "Title.Back.Logo": "{backLogo}",
  "Title.Menu.Logo": "{menuLogo}"
}

---

نوار جستجو (Search)

این بخش تنظیمات نوار جستجو در صفحه لیست را مدیریت می‌کند: شامل فعال یا غیرفعال کردن نوار جستجو، تعیین آیکون جستجو و متن پیش‌فرض (Placeholder) برای ورودی جستجو است.

فیلد	نوع	مقدار پیش‌فرض	توضیحات
Title.Search.Show	Boolean	false	فعال یا غیرفعال کردن نوار جستجو
Title.Search.Logo	Logo	{searchLogo}	آیکون نمایش داده شده در نوار جستجو
Title.Search.Hint	String	{searchHint}	متن پیش‌فرض ورودی جستجو

نمونه کدنویسی:

{
  "@Type": "Listing",

  "Title.Search.Show": false,
  "Title.Search.Logo": "{searchLogo}",
  "Title.Search.Hint": "{searchHint}"
}

---

وضعیت خالی (Empty)

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

فیلد	نوع	مقدار پیش‌فرض	توضیحات
Empty.Text	String	{text}	متنی که وقتی لیست خالی است نمایش داده می‌شود
Empty.Text.Color	Color	{textColor}	رنگ متن برای وضعیت خالی
Empty.Text.Size	Number	20	اندازه فونت متن وضعیت خالی
Empty.Text.Style	TextStyle	{textStyle}	سبک متن وضعیت خالی (bold، italic و غیره)
Empty.Logo	Logo	{logo}	تصویر یا لوگوی وضعیت خالی
Empty.Logo.Size	Number	64	اندازه تصویر یا لوگوی وضعیت خالی

نمونه کدنویسی:

{
  "@Type": "Listing",

  "Empty.Text": "{text}",
  "Empty.Text.Color": "{textColor}",
  "Empty.Text.Size": 20,
  "Empty.Text.Style": "{textStyle}",
  "Empty.Logo": "{logo}",
  "Empty.Logo.Size": 64
}

---

ناوبری (Nav)

فیلد AppNav.Show یک Boolean است که مشخص می‌کند آیا نوار ناوبری در اپلیکیشن نمایش داده شود یا نه.

فیلد	نوع	مقدار پیش‌فرض	توضیحات
AppNav.Show	Boolean	false	کنترل نمایش نوار ناوبری

نمونه کدنویسی:

{
  "@Type": "Listing",

  "AppNav.Show": false
}

پاورقی (Footer)

این بخش پاورقی صفحه را تعریف می‌کند: صفحه‌ای که درون پاورقی نمایش داده می‌شود، ارتفاع، شعاع گوشه‌ها و فاصله خارجی پاورقی و فاصله خط جداکننده را کنترل می‌کند.

فیلد	نوع	مقدار پیش‌فرض	توضیحات
Footer.View	PageName	{pageName}	صفحه‌ای که داخل پاورقی نمایش داده می‌شود
Footer.Size	Number	100	ارتفاع پاورقی
Footer.Radius	Number	0	شعاع گوشه‌های پاورقی
Footer.Margin	Number	0	فاصله بیرونی پاورقی
Footer.MarginLine	Number	0	فاصله خط جداکننده پاورقی

نمونه کدنویسی:

{
  "@Type": "Listing",

  "Footer.View": "{pageName}",
  "Footer.Size": 100,
  "Footer.Radius": 0,
  "Footer.Margin": 0,
  "Footer.MarginLine": 0
}

عناصر و آیتم‌ها (Elements & Items)

این بخش صفحه لیست را تعریف می‌کند: شامل آرایه Elements برای کامپوننت‌های داخلی و آرایه Items برای آیتم‌هایی است که باید نمایش داده شوند.

فیلد	نوع	مقدار پیش‌فرض	توضیحات
Elements	Array	[]	آرایه‌ای از عناصر (کامپوننت‌ها) در لیست
Items	Array	[]	آرایه‌ای از آیتم‌هایی که باید نمایش داده شوند

نمونه کدنویسی:

{
  "@Type": "Listing",

  "Elements": [

  ],

  "Items": [

  ]
}

🔗 نسخهٔ بصری

برای مشاهدهٔ نحوهٔ ایجاد این صفحه در اپلیکیشن ساز اپلین (حالت بدون کدنویسی)، به لینک زیر مراجعه کنید:
طراحی صفحهٔ لیست در اپلین استودیو