Kavramlar

Görünüm ve his

Sayfayı kopyala

Lia'ın bir parçası hissettirin. Lia'in temaları CSS değişkenleri, ekran alanı ve güvenli alanlar, kişinin dili ve sağdan sola metin, ve susturabilecekleri ses.

#Lia'teması

Lia sayfanıza renklerini iletir, ışık veya karanlık, kişi Lia ayarına göre. Sonra Lia.init() onlar'sayfanızdaki CSS değişkenlerini'kök, kişi değiştiğinde güncel tutulur:

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

Değişken	İçinden `Lia.theme`	O ne demek
`--lia-bg-color`	`bg_color`	Sayfa'u arka plan
`--lia-text-color`	`text_color`	Metin
`--lia-hint-color`	`hint_color`	Daha sessiz metin
`--lia-link-color`	`link_color`	Bağlantılar (Lia mavi)
`--lia-button-color`	`button_color`	Düğmeler (Lia mavi)
`--lia-button-text-color`	`button_text_color`	Düğmelerdeki metin
`--lia-secondary-bg-color`	`secondary_bg_color`	Kartlar ve kuyular
`--lia-header-bg-color`	`header_bg_color`	Lia'başlık
`--lia-bottom-bar-bg-color`	`bottom_bar_bg_color`	Alt düğmelerin arkasında
`--lia-accent-text-color`	`accent_text_color`	Aksanlı metin
`--lia-section-bg-color`	`section_bg_color`	Bölümler
`--lia-section-header-text-color`	`section_header_text_color`	Bölüm başlıkları
`--lia-subtitle-text-color`	`subtitle_text_color`	Altyazılar
`--lia-destructive-text-color`	`destructive_text_color`	Yıkıcı eylemler
`--lia-section-separator-color`	`section_separator_color`	Kıl çizgileri
`--lia-color-scheme`	`Lia.colorScheme`	`light` veya `dark`

İsimler Telegram takip eder'tema parametreleri, bu yüzden Telegram mini uygulamaları için yazılan kodlar geçerlidir. Dinleyin theme kendi çizdiğiniz şeyleri yeniden çizmek için olay (örneğin bir canvas).

Sayfanızın arka plan rengini ve Lia rengini ayarlayabilirsiniz's başlığı ile Lia.setBackgroundColor ve Lia.setHeaderColor.

#Görünüm alanı

Lia.viewport dır { height, expanded }: sayfanızın piksel cinsinden yüksekliği ve bir sayfa tam yüksekliğe çekildi mi. The viewport değiştiğinde (sayfa çekildi, alt düğmeler gösterildi), olay tetiklenir ve --lia-viewport-height yüksekliği saklar.

#Güvenli alanlar

Telefonlar not ve ev çubukları vardır. Lia bunları geçer Lia.safeArea ve CSS değişkenler, px içinde:

Değişken	O ne demek
`--lia-safe-area-inset-top`, `-bottom`, `-left`, `-right`	Telefon'kendi güvenli alanı (`Lia.safeArea`)
`--lia-content-safe-area-inset-top`, `-bottom`, `-left`, `-right`	Lia temiz'tam ekran da yüzen Kapat ve ⋯ (`Lia.contentSafeArea`)

Bir tablo veya Lia altında's başlığı, genellikle alttakini ihtiyacınız olur. Tam ekran modunda, içerik güvenli alanın altına kalmalıdır'en üstte:

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

#Dil

Lia.language kişinin Lia'da kullandığı dil, Lia'den biri's 13:

Kod	Dil	Kod	Dil
`en`	İngilizce	`id`	Bahasa Indonesia
`es`	İspanyolca	`fil`	Filipince
`pt`	Portekizce	`sw`	Kiswahili
`fr`	Fransızca	`hi`	हिन्दी
`tr`	Türkçe	`ar`	Arapça (sağdan sola)
`ru`	Русский	`zh`	中文
`vi`	Tiếng Việt

Uygulamanızı göster'kendi kelimeleri içinde. SDK, sayfanızı ayarlar's lang senin için; Lia.rtl dilin sağdan sola okunup okunmadığını söyler, bu yüzden kendi yönünüzü ayarlayın:

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

#Ses

Kullanıcılar Lia üzerinden uygulamanızı susturabilir'menü, ve Lia uygulamanız için hatırlar. Lia.soundOn seslerini istiyor mu, ve soundChanged değiştiğinde ses çalar. Sadece o zaman ses çalar:'açık.

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

Sayfanız ilk bir dokunmaya ihtiyaç duymadan ses çalabilir. Telefon üzerinde zaten çalanan müziğe karıştırmak ve onu durdurmak yerine, ayarlayınız navigator.audioSession.type = "ambient" telefonun desteklediği yer (Lia'kendi oyunları yapar).

#Platform

Lia.platform dır ios veya android sonra init(). Lia'çerçeve telefonudur'kendi web görünümü: Safari'üzerinde iPhone, Chrome'üzerinde Android.

Otomatik çeviri. İngilizce, doğru kaynaktır. İngilizce olarak oku