Konsepto

Tingnan at pakiramdam

Kopya ang pahina

Gawin ang iyong app na kabilang sa Lia. Ang tema ng Lia bilang mga variable ng CSS, ang viewport at mga ligtas na lugar, ang wika ng tao at ang text na pakanan, at ang tunog na maaaring i-mute.

#Lia'ang tema

Lia ay ipapasa ang kanyang mga kulay sa iyong pahina, light o dark, ayon sa kung ano ang naka-set ng tao sa Lia. Pagkatapos Lia.init() silang'mga variable na CSS sa iyong pahina's root, nang nasa aktibo ang paglipat ng tao:

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

Variable	Mula `Lia.theme`	Ano ito
`--lia-bg-color`	`bg_color`	Ang pahina'na background
`--lia-text-color`	`text_color`	Tekstong
`--lia-hint-color`	`hint_color`	Mas maaliwalas na teksto
`--lia-link-color`	`link_color`	Mga link (Lia blue)
`--lia-button-color`	`button_color`	Mga pindutan (Lia na asul)
`--lia-button-text-color`	`button_text_color`	Teksto sa mga button
`--lia-secondary-bg-color`	`secondary_bg_color`	Mga card at wells
`--lia-header-bg-color`	`header_bg_color`	Lia'ang header
`--lia-bottom-bar-bg-color`	`bottom_bar_bg_color`	Nakapalibot sa mga pindutan sa ibaba
`--lia-accent-text-color`	`accent_text_color`	May mga nakasulat na teksto
`--lia-section-bg-color`	`section_bg_color`	Mga seksyon
`--lia-section-header-text-color`	`section_header_text_color`	Mga pamagat ng seksyon
`--lia-subtitle-text-color`	`subtitle_text_color`	Mga subtitle
`--lia-destructive-text-color`	`destructive_text_color`	Mga aksyon na nakakasama
`--lia-section-separator-color`	`section_separator_color`	Mga linya ng buhok
`--lia-color-scheme`	`Lia.colorScheme`	`light` o `dark`

Ang mga pangalang sumunod sa Telegram'ang mga parameter ng tema, kaya ang code na isulat para sa Telegram mini apps ay magkakasundo. Makinig para sa theme ang event para mag-redraw ng anumang iyong inilalagay (isang canvas, halimbawa).

Maaari mo ring itakda ang kulay sa likod ng iyong pahina at ng Lia'ng header, ang pangunahing kailangan mo ay ang ibabang isa. Sa fullscreen, panatilihin ang nilalaman sa ilalim ng content safe area Lia.setBackgroundColor at Lia.setHeaderColor.

#Ang viewport

Lia.viewport ay { height, expanded }: ang taas na mayroon ang iyong pahina sa px, at kung ang isang sheet ay inilabas sa buong taas. Ang viewport ang event ay mag-trigger kapag ito ay nagbabago (ang sheet na inilabas, ang mga pindutan sa ibaba na ipinakita), at --lia-viewport-height nagmamay-ari ang height.

#Mga ligtas na lugar

Ang mga telepono ay may notches at home bars. Lia ang nagpapasa nito bilang Lia.safeArea at CSS variables, sa px:

Variable	Ano ito
`--lia-safe-area-inset-top`, `-bottom`, `-left`, `-right`	Ang telepono'ang sariling ligtas na lugar (`Lia.safeArea`)
`--lia-content-safe-area-inset-top`, `-bottom`, `-left`, `-right`	Wala sa Lia'ang floating Close at ⋯ sa fullscreen din (`Lia.contentSafeArea`)

Sa isang sheet o ilalim ng Lia'ng header.'sa tuktok:

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

#Wika

Lia.language ay ang wika na ginagamit ng tao Lia sa, isa sa Lia's 13:

Code	Wika	Code	Wika
`en`	Ingles	`id`	Bahasa Indonesia
`es`	Español	`fil`	Filipino
`pt`	Português	`sw`	Kiswahili
`fr`	Français	`hi`	हिन्दी
`tr`	Türkçe	`ar`	العربية (right to left)
`ru`	Русский	`zh`	中文
`vi`	Tiếng Việt

Ipakita ang iyong app's sariling salita sa kanya. Ang SDK ay nagtatakda ng iyong pahina's lang para sa iyo; Lia.rtl sabi kung ang wika ay binabasa mula sa kaliwa patungo sa kanan, kaya ayusin ang direksyon nang sarili mo:

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

#Mga tunog

Ang mga tao ay maaaring mutes ang iyong app mula sa Lia's ⋯ menu, at ang Lia ay naiimprenta para sa iyong app. Lia.soundOn sabi kung nais nila ang iyong mga tunog, at soundChanged sabi kung kailan ito nagbabago. Mag-imbit ng mga tunog lamang habang ito'nasa.

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

Ang iyong pahina ay maaaring mag-imbit ng tunog nang walang paghihintay para sa unang pagtapat. Para magkombinasyon sa musika na nagsisimula na sa telepono kaysa i-stop ito, i-set ang navigator.audioSession.type = "ambient" kung saan ang telepono ay suportado (Lia'naka-own games do).

#Platforma

Lia.platform ay ios o android pagkatapos init(). Lia'ang frame ay ang telepono'ang sariling salita kapag iniwan.'nasa iPhone, Chrome'nasa Android.

Awtomatikong isinalin. Ang English ay ang source of truth. Basahin sa Ingles