المفاهيم

مظهر وشعور

نسخ الصفحة

اجعل تطبيقك يشعر بأنه جزء من Lia. متغيرات Lia كـ CSS، والمنطقة المُشاهد، والمناطق الآمنة، اللغة الخاصة بالشخص والنص من اليمين إلى اليسار، والصوت الذي يمكن إيقافه.

#Lia'السمة

يُمرر Lia ألوانه إلى صفحتك، فاتحًا أو داكنًا، حسب إعداد الشخص لـ Lia. بعد Lia.init() هم'إعادة متغيرات CSS على صفحتك'الجذر، محدثة عندما يغير الشخص:

body {
  background: var(--lia-bg-color);
  color: var(--lia-text-color);
}
.card { background: var(--lia-secondary-bg-color); }
.hint { color: var(--lia-hint-color); }
button.primary { background: var(--lia-button-color); color: var(--lia-button-text-color); }

متغير	من `Lia.theme`	ماذا هو
`--lia-bg-color`	`bg_color`	الصفحة'الخلفية
`--lia-text-color`	`text_color`	نص
`--lia-hint-color`	`hint_color`	نص هادئ
`--lia-link-color`	`link_color`	الروابط (اللون الأزرق لـ Lia)
`--lia-button-color`	`button_color`	الأزرار (اللون الأزرق Lia)
`--lia-button-text-color`	`button_text_color`	نص على الأزرار
`--lia-secondary-bg-color`	`secondary_bg_color`	البطاقات والأنهار
`--lia-header-bg-color`	`header_bg_color`	Lia'العنوان
`--lia-bottom-bar-bg-color`	`bottom_bar_bg_color`	خلف الأزرار السفلية
`--lia-accent-text-color`	`accent_text_color`	نص مُعَلَّم
`--lia-section-bg-color`	`section_bg_color`	الأقسام
`--lia-section-header-text-color`	`section_header_text_color`	عناوين الأقسام
`--lia-subtitle-text-color`	`subtitle_text_color`	التعليقات التوضيحية
`--lia-destructive-text-color`	`destructive_text_color`	الإجراءات التدميرية
`--lia-section-separator-color`	`section_separator_color`	خطوط الشعر
`--lia-color-scheme`	`Lia.colorScheme`	`light` أو `dark`

أسماء الأشخاص تتبع تيليجرام'معلمات السمة، لذلك يتم تطبيق الشفرة المكتوبة لتطبيقات تيليجرام الصغيرة. استمع للـ theme الحدث لإعادة رسم أي شيء ترسمه بنفسك (مثل لوحة رسم).

يمكنك أيضًا تحديد اللون خلف صفحتك ولون Lia'عنوانه مع Lia.setBackgroundColor و Lia.setHeaderColor.

#النافذة

Lia.viewport هو { height, expanded }: الارتفاع الذي تملكه صفحتك بالبكسل، وهل ورقة مطوية مُستخدمة لعرض كامل. ال viewport يُطلق الحدث عندما يتغير (الورقة المنسدلة، الأزرار السفلية تظهر)، و --lia-viewport-height تحتفظ بالارتفاع.

#مناطق آمنة

الهواتف لها شقوق وشرائح المنزل. Lia تمررها كـ Lia.safeArea و CSS متغيرات، بالبكسل:

متغير	ماذا هو
`--lia-safe-area-inset-top`, `-bottom`, `-left`, `-right`	الهاتف'منطقة آمنة خاصة به (`Lia.safeArea`)
`--lia-content-safe-area-inset-top`, `-bottom`, `-left`, `-right`	خالي من Lia'أزرار الإغلاق العائمة و⋯ في وضع الشاشة الكاملة أيضًا (`Lia.contentSafeArea`)

في ورقة أو تحت Lia'عنوانه، أغلب ما تحتاجه هو الأدنى. في الشاشة الكاملة، احتفظ بالمحتوى أسفل منطقة المحتوى الآمن'أعلى:

.app {
  padding-top: var(--lia-content-safe-area-inset-top, 0px);
  padding-bottom: var(--lia-safe-area-inset-bottom, 0px);
}

#اللغة

Lia.language هو اللغة التي يستخدمها الشخص Lia فيها، واحدة من Lia's 13:

الكود	اللغة	الكود	اللغة
`en`	الإنجليزية	`id`	اللغة الإندونيسية
`es`	إسبانول	`fil`	فلبيني
`pt`	البرتغالية	`sw`	كيسواهيلي
`fr`	الفرنسية	`hi`	हिन्दी
`tr`	التركية	`ar`	العربية (من اليمين إلى اليسار)
`ru`	Русский	`zh`	中文
`vi`	الفيتنامية

عرض تطبيقك'كلماته الخاصة فيها. يحدد SDK صفحةك's lang لك; Lia.rtl تقول ما إذا كانت اللغة تُقرأ من اليمين إلى اليسار، لذلك قم بتعيين الاتجاه بنفسك:

Lia.init().then(function () {
  document.documentElement.dir = Lia.rtl ? "rtl" : "ltr";
  render(WORDS[Lia.language] || WORDS.en);
  Lia.ready();
});
Lia.on("languageChanged", function (data) {
  document.documentElement.dir = data.rtl ? "rtl" : "ltr";
  render(WORDS[data.language] || WORDS.en);
});

#صوت

يمكن للناس كتم صوت تطبيقك من Lia'قائمة ...)، والـ Lia يحفظها لتطبيقك. Lia.soundOn تقول ما إذا كانوا يريدون أصواتك، و soundChanged تقول عندما يتغير. تُصدر أصواتًا فقط أثناء ذلك'مفعلة. تُحلّ حلّاً بـ

let soundOn = Lia.soundOn;
Lia.on("soundChanged", function (data) {
  soundOn = data.on;
  if (!soundOn) music.pause();
});
function play(sound) { if (soundOn) sound.play(); }

قد تلعب صفحتك صوتًا دون الانتظار لضغط أول. لدمجها مع الموسيقى الموجودة بالهاتف بدلًا من إيقافها، قم بتعيين navigator.audioSession.type = "ambient" حيث يدعم الهاتف ذلك (Lia'مملكتها الألعاب).

#المنصة

Lia.platform هو ios أو android بعد init(). Lia'إطاره هو الهاتف'متصفحه الخاص: سافاري'مفعلة على iPhone، كروم'مفعلة على Android.

تم الترجمة تلقائيًا. الإنجليزية هي مصدر الحقيقة. اقرأ باللغة الإنجليزية