Conceitos

Aparência e sensação

Copiar página

Faça seu app parecer parte de Lia. As variáveis Lia de tema CSS, o viewport e as áreas seguras, o idioma da pessoa e o texto da direita para a esquerda, e o som que ela pode silenciar.

#Lia'tema

Lia passa suas cores para sua página, claro ou escuro, conforme a pessoa tiver Lia configurado. Após Lia.init() eles're CSS variáveis na sua página'raiz, mantida atualizada quando a pessoa muda:

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

Variável	De `Lia.theme`	O que ele é
`--lia-bg-color`	`bg_color`	A página's fundo
`--lia-text-color`	`text_color`	Texto
`--lia-hint-color`	`hint_color`	Texto mais discreto
`--lia-link-color`	`link_color`	Links (Lia azul)
`--lia-button-color`	`button_color`	Botões (Lia azul)
`--lia-button-text-color`	`button_text_color`	Texto nos botões
`--lia-secondary-bg-color`	`secondary_bg_color`	Cartas e poços
`--lia-header-bg-color`	`header_bg_color`	Lia'cabeçalho
`--lia-bottom-bar-bg-color`	`bottom_bar_bg_color`	Atrás dos botões inferiores
`--lia-accent-text-color`	`accent_text_color`	Texto com acento
`--lia-section-bg-color`	`section_bg_color`	Seções
`--lia-section-header-text-color`	`section_header_text_color`	Títulos de seções
`--lia-subtitle-text-color`	`subtitle_text_color`	Legendas
`--lia-destructive-text-color`	`destructive_text_color`	Ações destrutivas
`--lia-section-separator-color`	`section_separator_color`	Linhas de cabelo
`--lia-color-scheme`	`Lia.colorScheme`	`light` ou `dark`

Os nomes seguem o Telegram'parâmetros de tema, então código escrito para mini apps do Telegram mapeia entre si. Escute o theme evento para redesenhar qualquer coisa que você pinte por conta própria (um canvas, por exemplo).

Você também pode definir a cor atrás de sua página e de Lia'cabeçalho com Lia.setBackgroundColor e Lia.setHeaderColor.

#A viewport

Lia.viewport é { height, expanded }: a altura que sua página tem em px, e se uma folha é puxada até a altura total. O viewport evento é acionado quando muda (a planilha aberta, os botões inferiores exibidos), e --lia-viewport-height segura a altura.

#Áreas seguras

Celulares têm notches e barras de home. Lia os passa como Lia.safeArea e CSS variáveis, em px:

Variável	O que ele é
`--lia-safe-area-inset-top`, `-bottom`, `-left`, `-right`	O telefone'seu próprio área segura (`Lia.safeArea`)
`--lia-content-safe-area-inset-top`, `-bottom`, `-left`, `-right`	Livre de Lia'botões Flutuantes Close e ⋯ em tela cheia também (`Lia.contentSafeArea`)

Em uma planilha ou sob Lia'cabeçalho, você quase sempre precisa do de baixo. Em tela cheia, mantenha o conteúdo abaixo da área segura de conteúdo'topo:

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

#Idioma

Lia.language é o idioma que a pessoa usa Lia em, um dos Lia's 13:

Código	Idioma	Código	Idioma
`en`	Inglês	`id`	Indonésio
`es`	Espanhol	`fil`	Filipino
`pt`	Português	`sw`	Suahi
`fr`	Français	`hi`	हिन्दी
`tr`	Turco	`ar`	Árabe (da direita para a esquerda)
`ru`	Русский	`zh`	中文
`vi`	Vietnamita

Mostre seu app'suas próprias palavras nele. O SDK define sua página's lang para você; Lia.rtl diz se o idioma é lido da direita para a esquerda, então defina a direção você mesmo:

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

#Som

Pessoas podem silenciar seu app do Lia'menu ⋯, e Lia o lembra para seu app. Lia.soundOn diz se eles querem seus sons, e soundChanged diz quando muda. Toque sons apenas enquanto ele's ativo.

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

Sua página pode tocar som sem esperar um primeiro toque. Para misturar com música já tocando no telefone em vez de pará-la, defina navigator.audioSession.type = "ambient" onde o telefone suporta (Lia'seu próprio jogos fazem).

#Plataforma

Lia.platform é ios ou android depois init(). Lia'frame é o telefone'sua própria visualização na web: Safari's em iPhone, Chrome's em Android.

Traduzido automaticamente. O inglês é a fonte de verdade. Leia em inglês