Khái niệm

Giao diện và cảm giác

Sao chép trang

Làm ứng dụng của bạn cảm giác như một phần của Lia. Các biến Lia của CSS, vùng xem và khu vực an toàn, ngôn ngữ của người dùng và văn bản từ phải sang trái, và âm thanh mà họ có thể tắt.

#Lia'mà chủ đề

Lia truyền màu sắc của nó cho trang của bạn, sáng hoặc tối, tùy theo người dùng có Lia được thiết lập. Sau Lia.init() họ'tham chiếu các biến CSS trên trang của bạn'căn bản, được giữ cập nhật khi người dùng chuyển đổi:

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); }

Biến	Từ `Lia.theme`	Cái gì nó là
`--lia-bg-color`	`bg_color`	Trang'nền
`--lia-text-color`	`text_color`	Văn bản
`--lia-hint-color`	`hint_color`	Văn bản nhẹ nhàng hơn
`--lia-link-color`	`link_color`	Liên kết (Lia xanh)
`--lia-button-color`	`button_color`	Nút (Lia màu xanh)
`--lia-button-text-color`	`button_text_color`	Văn bản trên nút
`--lia-secondary-bg-color`	`secondary_bg_color`	Thẻ và giếng
`--lia-header-bg-color`	`header_bg_color`	Lia'tiêu đề
`--lia-bottom-bar-bg-color`	`bottom_bar_bg_color`	Nằm phía sau các nút dưới cùng
`--lia-accent-text-color`	`accent_text_color`	Văn bản có dấu
`--lia-section-bg-color`	`section_bg_color`	Phần
`--lia-section-header-text-color`	`section_header_text_color`	Tiêu đề phần
`--lia-subtitle-text-color`	`subtitle_text_color`	Chú thích
`--lia-destructive-text-color`	`destructive_text_color`	Hành động phá hủy
`--lia-section-separator-color`	`section_separator_color`	Đường viền tóc
`--lia-color-scheme`	`Lia.colorScheme`	`light` hoặc `dark`

Tên tuân theo Telegram'mà tham số chủ đề, vì vậy mã được viết cho ứng dụng mini Telegram có thể chuyển đổi. Nghe để theme sự kiện để vẽ lại bất cứ thứ gì bạn tự vẽ (một bảng vẽ, ví dụ).

Bạn cũng có thể đặt màu sắc phía sau trang của bạn và của Lia'tiêu đề với Lia.setBackgroundColor và Lia.setHeaderColor.

#Khu vực xem

Lia.viewport là { height, expanded }: chiều cao trang của bạn tính bằng px, và liệu một tấm bìa có được kéo lên đầy chiều cao hay không. Cái viewport sự kiện xảy ra khi nó thay đổi (bảng được kéo lên, nút dưới được hiển thị), và --lia-viewport-height giữ chiều cao.

#Khu vực an toàn

Điện thoại có notch và thanh home. Lia truyền chúng như Lia.safeArea và CSS biến số, theo px:

Biến	Cái gì nó là
`--lia-safe-area-inset-top`, `-bottom`, `-left`, `-right`	Điện thoại'khu vực an toàn riêng của bạn (`Lia.safeArea`)
`--lia-content-safe-area-inset-top`, `-bottom`, `-left`, `-right`	Sạch sẽ Lia'các nút Close và ⋯ trôi nổi trong chế độ toàn màn hình nữa (`Lia.contentSafeArea`)

Trong một bảng tính hoặc dưới Lia'của tiêu đề, bạn chủ yếu cần phần dưới. Trong chế độ toàn màn hình, hãy giữ nội dung bên dưới khu vực an toàn cho nội dung'mà đầu:

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

#Ngôn ngữ

Lia.language là ngôn ngữ mà người đó sử dụng Lia trong, một trong số Lia's 13:

Mã	Ngôn ngữ	Mã	Ngôn ngữ
`en`	Tiếng Anh	`id`	Tiếng Indonesia
`es`	Tiếng Tây Ban Nha	`fil`	Tiếng Philippines
`pt`	Tiếng Bồ Đào Nha	`sw`	Kiswahili
`fr`	Tiếng Pháp	`hi`	हिन्दी
`tr`	Tiếng Thổ Nhĩ Kỳ	`ar`	Tiếng Ả Rập (từ phải sang trái)
`ru`	Русский	`zh`	中文
`vi`	Tiếng Việt

Hiển thị ứng dụng của bạn'từ riêng của bạn trong đó. SDK thiết lập trang của bạn's lang cho bạn; Lia.rtl nói xem ngôn ngữ có được đọc từ trái sang phải hay không, vì vậy bạn phải thiết lập hướng tự mình:

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);
});

#Âm thanh

Mọi người có thể tắt âm ứng dụng của bạn từ Lia'mà menu ⋯, và Lia sẽ nhớ nó cho ứng dụng của bạn. Lia.soundOn nói xem họ có muốn âm thanh của bạn, và soundChanged nói khi nó thay đổi. Phát âm thanh chỉ khi nó'trên.

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

Trang của bạn có thể phát âm thanh mà không cần chạm đầu tiên. Để kết hợp với âm nhạc đang phát trên điện thoại thay vì dừng nó, hãy đặt navigator.audioSession.type = "ambient" nơi điện thoại hỗ trợ (Lia'trò chơi riêng của họ do).

#Nền tảng

Lia.platform là ios hoặc android sau init(). Lia'khung là điện thoại'trình duyệt web riêng của bạn: Safari'trên iPhone, Chrome'trên Android.

Được dịch tự động. Tiếng Anh là nguồn tin cậy. Đọc bằng tiếng Anh