صفحه چت امکان ارسال پیام در لحظه و گفتگو را در داخل اپلیکیشن فراهم میکند و از متن، ایموجی، تصاویر و پیوستها پشتیبانی میکند.
این بخش رفتار اصلی یک صفحه چت را تعریف میکند: نوع، نام، رنگ و کاور را مشخص میکند، ناوبری را با مسیرها (Routes)، صفحه بعدی (NextPage) و Timeout کنترل میکند، مشخص میکند که آیا صفحه آخرین مرحله است یا خیر، گزینههای نمایش مثل تمامصفحه (Fullscreen)، حالت افقی (Landscape) و امکان گرفتن اسکرینشات را مدیریت میکند و چیدمان و جهت متن را تعیین میکند.
| فیلد | نوع | مقدار پیشفرض | توضیحات |
|---|---|---|---|
| @Type | PageType | "Chat" | نوع صفحه را به عنوان صفحه چت مشخص میکند |
| 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": "Chat",
"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.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.Back.Logo | Logo | {backLogo} | آیکون دکمه بازگشت |
نمونه کدنویسی:
{
"@Type": "Chat",
"Title.Color": "{titleColor}",
"Title.Text": "{titleText}",
"Title.Text.Size": 16,
"Title.Text.Color": "{titleTextColor}",
"Title.Text.Style": "{titleTextStyle}",
"Title.Back.Logo": "{backLogo}"
}این بخش تنظیمات هویت کاربر در چت را تعریف میکند. شامل Chat.Email برای ایمیل کاربر، Chat.Name برای نام نمایش در گفتگو و Chat.Profile برای تصویر پروفایل یا آواتار است. این فیلدها هویت و حضور کاربر در رابط چت را مشخص میکنند.
| فیلد | نوع | مقدار پیشفرض | توضیحات |
|---|---|---|---|
| Chat.Email | {email} | ایمیل کاربر مرتبط با چت | |
| Chat.Name | String | {chatName} | نام نمایشی کاربر در چت |
| Chat.Profile | URL | {chatProfile} | تصویر پروفایل یا آواتار کاربر |
نمونه کدنویسی:
{
"@Type": "Chat",
"Chat.Email": "{email}",
"Chat.Name": "{chatName}",
"Chat.Profile": "{chatProfile}"
}این بخش ظاهر و کنترلهای رابط چت را مدیریت میکند. امکان تغییر رنگ نوار ورودی، پسزمینه اصلی و رنگ متن عنوان و همچنین رنگ پیشفرض پیامها را فراهم میکند. آیکونهای اصلی شامل ارسال پیام، انتخاب ایموجی، اشتراکگذاری رسانه، بستن چت، ویرایش، پاسخ و پین کردن پیامها را هم تعریف میکند.
| فیلد | نوع | مقدار پیشفرض | توضیحات |
|---|---|---|---|
| Chat.Bar.Color | Color | {barColor} | رنگ نوار ورودی چت |
| Chat.Color | Color | {color} | رنگ پسزمینه اصلی چت |
| Chat.Title.Color | Color | {titleColor} | رنگ متن عنوان چت |
| Chat.Text.Color | Color | {textColor} | رنگ پیشفرض متن پیامها |
| Chat.Send.Logo | Logo | {sendLogo} | آیکون دکمه ارسال پیام |
| Chat.Emoji.Logo | Logo | {emojiLogo} | آیکون انتخاب ایموجی |
| Chat.Emoji.Logo.Hover | Logo | {emojiLogoHover} | آیکون حالت هاور دکمه ایموجی |
| Chat.Media.Logo | Logo | {mediaLogo} | آیکون ارسال فایلهای رسانهای |
| Chat.Close.Logo | Logo | {closeLogo} | آیکون بستن رابط چت |
| Chat.Edit.Logo | Logo | {editLogo} | آیکون ویرایش پیام |
| Chat.Reply.Logo | Logo | {replyLogo} | آیکون پاسخ دادن به پیام |
| Chat.Pin.Logo | Logo | {pinLogo} | آیکون سنجاق کردن پیام |
نمونه کدنویسی:
{
"@Type": "Chat",
"Chat.Bar.Color": "{barColor}",
"Chat.Color": "{color}",
"Chat.Title.Color": "{titleColor}",
"Chat.Text.Color": "{textColor}",
"Chat.Send.Logo": "{sendLogo}",
"Chat.Emoji.Logo": "{emojiLogo}",
"Chat.Emoji.Logo.Hover": "{emojiLogoHover}",
"Chat.Media.Logo": "{mediaLogo}",
"Chat.Close.Logo": "{closeLogo}",
"Chat.Edit.Logo": "{editLogo}",
"Chat.Reply.Logo": "{replyLogo}",
"Chat.Pin.Logo": "{pinLogo}"
}این بخش استایل و رفتار پیامهای چت را تعریف میکند. شامل تنظیم گردی حبابها، رنگ پسزمینه پیامها برای کاربر و دیگران (شامل پاسخها)، رنگ متن هر طرف گفتگو، آیکون وضعیت دیده شدن پیام با هاور و اندازه فونت پیامها است. این تنظیمات تجربهای سازگار، شخصیسازی شده و واضح در محیط چت فراهم میکنند.
| فیلد | نوع | مقدار پیشفرض | توضیحات |
|---|---|---|---|
| Chat.Radius | Number | 12 | شعاع گوشههای حباب پیامها |
| Chat.Me.Color | Color | {meColor} | رنگ پسزمینه پیامهای کاربر |
| Chat.Than.Color | Color | {thanColor} | رنگ پسزمینه پیامهای دیگران |
| Chat.Me.Reply.Color | Color | {meReplyColor} | رنگ پسزمینه پیامهای پاسخ کاربر |
| Chat.Than.Reply.Color | Color | {thanReplyColor} | رنگ پسزمینه پیامهای پاسخ دیگران |
| Chat.Me.Text.Color | Color | {meTextColor} | رنگ متن پیامهای کاربر |
| Chat.Than.Text.Color | Color | {thanTextColor} | رنگ متن پیامهای دیگران |
| Chat.Seen.Logo | Logo | {seenLogo} | آیکون وضعیت دیده شدن پیام |
| Chat.Seen.Logo.Hover | Logo | {seenLogoHover} | آیکون حالت هاور برای وضعیت دیده شدن پیام |
| Chat.Text.Size | Number | 12 | اندازه فونت متن پیامها |
نمونه کدنویسی:
{
"@Type": "Chat",
"Chat.Radius": 12,
"Chat.Me.Color": "{meColor}",
"Chat.Than.Color": "{thanColor}",
"Chat.Me.Reply.Color": "{meReplyColor}",
"Chat.Than.Reply.Color": "{thanReplyColor}",
"Chat.Me.Text.Color": "{meTextColor}",
"Chat.Than.Text.Color": "{thanTextColor}",
"Chat.Seen.Logo": "{seenLogo}",
"Chat.Seen.Logo.Hover": "{seenLogoHover}",
"Chat.Text.Size": 12
}برای مشاهدهٔ نحوهٔ ایجاد این صفحه در اپلیکیشن ساز اپلین (حالت بدون کدنویسی)، به لینک زیر مراجعه کنید:
طراحی صفحهٔ چت در اپلین استودیو