Konsep

Tampilan dan nuansa

Salin halaman

Buat aplikasi Anda terasa bagian dari Lia. Variabel Lia tema CSS, viewport dan area aman, bahasa seseorang dan teks dari kanan ke kiri, serta suara yang bisa dimatikan.

#Lia'tema s

Lia mentransfer warna-warnanya ke halaman Anda, terang atau gelap, sesuai dengan yang diatur Lia oleh orang tersebut. Setelah Lia.init() mereka'ubah variabel CSS di halaman Anda'akar, dijaga tetap diperbarui ketika orang berpindah:

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

Variabel	Dari `Lia.theme`	Apa itu
`--lia-bg-color`	`bg_color`	Halaman'latar belakang
`--lia-text-color`	`text_color`	Teks
`--lia-hint-color`	`hint_color`	Teks yang lebih tenang
`--lia-link-color`	`link_color`	Tautan (Lia biru)
`--lia-button-color`	`button_color`	Tombol (Lia biru)
`--lia-button-text-color`	`button_text_color`	Teks pada tombol
`--lia-secondary-bg-color`	`secondary_bg_color`	Kartu dan sumur
`--lia-header-bg-color`	`header_bg_color`	Lia'header
`--lia-bottom-bar-bg-color`	`bottom_bar_bg_color`	Di belakang tombol bawah
`--lia-accent-text-color`	`accent_text_color`	Teks dengan aksen
`--lia-section-bg-color`	`section_bg_color`	Bagian
`--lia-section-header-text-color`	`section_header_text_color`	Judul bagian
`--lia-subtitle-text-color`	`subtitle_text_color`	Subtitle
`--lia-destructive-text-color`	`destructive_text_color`	Tindakan merusak
`--lia-section-separator-color`	`section_separator_color`	Garis rambut
`--lia-color-scheme`	`Lia.colorScheme`	`light` atau `dark`

Nama-nama mengikuti Telegram'parameter tema s, sehingga kode yang ditulis untuk aplikasi mini Telegram dapat dipetakan. Dengarkan untuk theme acara untuk menggambar ulang apa pun yang Anda buat sendiri (misalnya, kanvas).

Anda dapat menyetel warna di belakang halaman Anda dan Lia'header dengan Lia.setBackgroundColor dan Lia.setHeaderColor.

#Viewport

Lia.viewport adalah { height, expanded }: tinggi halaman Anda dalam px, dan apakah lembaran ditarik hingga penuh. The viewport acara terpicu saat berubah (lembaran yang ditarik, tombol bawah ditampilkan), dan --lia-viewport-height menyimpan ketinggian.

#Area aman

Ponsel memiliki notch dan bar home. Lia melewatkan mereka sebagai Lia.safeArea dan variabel CSS, dalam px:

Variabel	Apa itu
`--lia-safe-area-inset-top`, `-bottom`, `-left`, `-right`	Ponsel'area aman miliknya (`Lia.safeArea`)
`--lia-content-safe-area-inset-top`, `-bottom`, `-left`, `-right`	Bersih dari Lia'tombol Close dan ⋯ yang mengambang di fullscreen juga (`Lia.contentSafeArea`)

Di lembaran atau di bawah Lia'header, kamu sebagian besar membutuhkan yang bawah. Dalam mode layar penuh, pertahankan konten di bawah area aman konten'paling atas s:

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

#Bahasa

Lia.language adalah bahasa yang digunakan orang Lia dalam, salah satu dari Lia's 13:

Kode	Bahasa	Kode	Bahasa
`en`	Bahasa Inggris	`id`	Bahasa Indonesia
`es`	Español	`fil`	Filipino
`pt`	Portugis	`sw`	Kiswahili
`fr`	Français	`hi`	हिन्दी
`tr`	Türkçe	`ar`	العربية (kiri ke kanan)
`ru`	Русский	`zh`	中文
`vi`	Bahasa Vietnam

Tampilkan aplikasi Anda'kata miliknya dalam hal itu. SDK menetapkan halaman Anda's lang untuk Anda; Lia.rtl katakan apakah bahasa membaca dari kanan ke kiri, jadi atur arah sendiri:

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

#Suara

Orang dapat menonaktifkan notifikasi aplikasi Anda dari Lia'menu, dan Lia mengingatnya untuk aplikasi Anda. Lia.soundOn katakan apakah mereka ingin suara Anda, dan soundChanged katakan kapan berubah. Putar suara hanya saat itu'diaktifkan.

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

Halaman Anda dapat memainkan suara tanpa menunggu ketuk pertama. Untuk menggabungkannya dengan musik yang sudah dimainkan di ponsel alih-alih menghentikannya, atur navigator.audioSession.type = "ambient" di mana ponsel mendukungnya (Lia'permainan sendiri).

#Platform

Lia.platform adalah ios atau android setelah init(). Lia'frame adalah ponsel'tampilan web miliknya: Safari'di iPhone, Chrome'di Android.

Diterjemahkan otomatis. Bahasa Inggris adalah sumber kebenaran. Baca dalam Bahasa Inggris