概念

外观和感觉

复制页面

让你的应用感觉是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`	页面's 背景
`--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`

名称遵循电报'的主题参数，因此为Telegram小程序编写的代码可以跨平台映射。监听 theme 事件以重新绘制您自己绘制的内容（例如画布）。

您还可以设置页面背后的颜色和 Lia 的颜色'的标题带有 Lia.setBackgroundColor 和 Lia.setHeaderColor.

#视口

Lia.viewport 是 { height, expanded }: 您的页面的像素高度，以及是否有一个表单被拉到全高。这个 viewport 当它发生变化时触发事件（表格被拉出，底部按钮显示），以及 --lia-viewport-height 保留高度。

#安全区域

手机有刘海和主页栏。Lia 会将它们作为 Lia.safeArea 和CSS变量，以px为单位：

变量	它是什么
`--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`	Français	`hi`	हिन्दी
`tr`	Türkçe	`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'的框架是手机'自己的网页视图：Safari'的iPhone上，Chrome'的Android上。

自动翻译。英语是真实来源。阅读英文