Conceptos
Aspecto y sensación
Copiar página
Haz que tu aplicación se sienta parte de Lia. Las variables Lia de CSS, el área de visualización y las áreas seguras, el idioma de la persona y el texto de derecha a izquierda, y el sonido que pueden silenciar.
#Lia'su tema
Lia pasa sus colores a tu página, claro o oscuro, según lo que la persona tenga Lia configurado. Después Lia.init() ellos're CSS variables en su página'la raíz, mantenida actualizada cuando la persona cambia:
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 | Desde Lia.theme | ¿Qué es |
|---|---|---|
--lia-bg-color | bg_color | La página's fondo |
--lia-text-color | text_color | Texto |
--lia-hint-color | hint_color | Texto más silencioso |
--lia-link-color | link_color | Enlaces (Lia azul) |
--lia-button-color | button_color | Botones (Lia azul) |
--lia-button-text-color | button_text_color | Texto en botones |
--lia-secondary-bg-color | secondary_bg_color | Tarjetas y pozos |
--lia-header-bg-color | header_bg_color | Lia'el encabezado |
--lia-bottom-bar-bg-color | bottom_bar_bg_color | Detrás de los botones inferiores |
--lia-accent-text-color | accent_text_color | Texto con acentos |
--lia-section-bg-color | section_bg_color | Secciones |
--lia-section-header-text-color | section_header_text_color | Títulos de sección |
--lia-subtitle-text-color | subtitle_text_color | Subtítulos |
--lia-destructive-text-color | destructive_text_color | Acciones destructivas |
--lia-section-separator-color | section_separator_color | Líneas de cabello |
--lia-color-scheme | Lia.colorScheme | light o dark |
Los nombres siguen a Telegram'parámetros de tema, por lo que el código escrito para aplicaciones mini de Telegram se mapea directamente. Escucha el theme evento para redibujar cualquier cosa que pintes tú mismo (por ejemplo, un lienzo).
También puedes establecer el color detrás de tu página y de Lia's encabezado con Lia.setBackgroundColor y Lia.setHeaderColor.
#El viewport
Lia.viewport es { height, expanded }: la altura que tiene tu página en píxeles, y si una hoja se levanta hasta la altura completa. El viewport el evento se dispara cuando cambia (la hoja se levanta, los botones inferiores se muestran), y --lia-viewport-height mantiene la altura.
#Áreas seguras
Los teléfonos tienen notch y barras de inicio. Lia los pasa como Lia.safeArea y CSS variables, en px:
| Variable | ¿Qué es |
|---|---|
--lia-safe-area-inset-top, -bottom, -left, -right | El teléfono'su propia zona segura (Lia.safeArea) |
--lia-content-safe-area-inset-top, -bottom, -left, -right | Limpio de Lia'los botones Cerrar flotantes y ⋯ en pantalla completa también (Lia.contentSafeArea) |
En una hoja o bajo Lia's encabezado, normalmente necesita el de abajo. En pantalla completa, mantenga el contenido por debajo del área segura de contenido'su parte superior:
.app {
padding-top: var(--lia-content-safe-area-inset-top, 0px);
padding-bottom: var(--lia-safe-area-inset-bottom, 0px);
}#Idioma
Lia.language es el idioma que la persona usa Lia en, uno de Lia's 13:
| Código | Idioma | Código | Idioma |
|---|---|---|---|
en | Inglés | id | Bahasa Indonesia |
es | Español | fil | Filipino |
pt | Portugués | sw | Suajili |
fr | Français | hi | हिन्दी |
tr | Turco | ar | Árabe (de derecha a izquierda) |
ru | Русский | zh | 中文 |
vi | Vietnamita |
Muestra tu app'su propia palabra en ella. El SDK establece su página's lang para ti; Lia.rtl dice si el idioma se lee de derecha a izquierda, así que establece la dirección tú mismo:
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);
});#Sonido
Las personas pueden silenciar tu aplicación desde Lia's ⋯ menú, y Lia lo recuerda para tu aplicación. Lia.soundOn dice si quieren tus sonidos, y soundChanged dice cuándo cambia. Reproduce sonidos solo mientras lo'en.
let soundOn = Lia.soundOn;
Lia.on("soundChanged", function (data) {
soundOn = data.on;
if (!soundOn) music.pause();
});
function play(sound) { if (soundOn) sound.play(); }Tu página puede reproducir sonido sin esperar un primer toque. Para mezclarlo con la música que ya esté reproduciéndose en el teléfono en lugar de detenerla, establece navigator.audioSession.type = "ambient" donde el teléfono lo soporte (Lia'propios juegos do).
#Plataforma
Lia.platform es ios o android después init(). Lia'el marco es el teléfono'su propio visor web: Safari'en iPhone, Chrome'en Android.
Traducido automáticamente. El inglés es la fuente de verdad. Leer en inglés