Mga Gabay

Isang checklist at starter code para ang iyong app ay tila bahagi ng Lia. Theme, safe areas, wika, mga button, back navigation, haptics at sound.

#Isang starter

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
  <script src="https://api.lialabs.org/sdk/lia-apps-v1.js"></script>
  <style>
    :root { color-scheme: light dark; }
    html, body { margin: 0; height: 100%; }
    body {
      background: var(--lia-bg-color, #fff);
      color: var(--lia-text-color, #0b0b0f);
      font: 16px/1.5 system-ui, -apple-system, sans-serif;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none;
      user-select: none;
    }
    .app {
      min-height: var(--lia-viewport-height, 100vh);
      padding: calc(16px + var(--lia-content-safe-area-inset-top, 0px)) 16px calc(16px + var(--lia-safe-area-inset-bottom, 0px));
      box-sizing: border-box;
    }
    .muted { color: var(--lia-hint-color, #6b6e7b); }
    .card { background: var(--lia-secondary-bg-color, #f5f5f7); border-radius: 18px; padding: 16px; }
  </style>
</head>
<body>
  <main class="app" id="app"></main>
  <script>
    var WORDS = {
      en: { hello: "Hello", start: "Start" },
      es: { hello: "Hola", start: "Empezar" },
      ar: { hello: "مرحبًا", start: "ابدأ" },
    };
    function words() { return WORDS[Lia.language] || WORDS.en; }

    Lia.init().then(function (me) {
      document.documentElement.dir = Lia.rtl ? "rtl" : "ltr";
      document.getElementById("app").innerHTML = '<div class="card"><b>' + words().hello + ", @" + me.player.name + '</b></div>';
      Lia.mainButton.setText(words().start).show().onClick(start);
      Lia.ready();
    }, function (error) {
      document.getElementById("app").textContent = "Open this app inside Lia.";
    });

    Lia.on("languageChanged", function (data) {
      document.documentElement.dir = data.rtl ? "rtl" : "ltr";
      Lia.mainButton.setText(words().start);
    });
  </script>
</body>
</html>

#Ang checklist

• Tawag Lia.ready() agad pagkatapos maipakita ang unang screen mo, hindi pagkatapos lahat ay naka-load. Lia's loader ay nagsasakop sa iyong app hanggang doon.
• Gamitin ang Lia'na mga kulay. Gumawa sa --lia-bg-color, --lia-text-color, --lia-hint-color at --lia-secondary-bg-color, at ang iyong app ay nagbabago kasama Lia sa pagitan ng light at dark.
• Tingnan ang mga ligtas na lugar. Ipadala ang ilalim na bahagi --lia-safe-area-inset-bottom; sa fullscreen, panatilihin ang nilalaman sa ilalim --lia-content-safe-area-inset-top.
• Sabiin ang wika nila. Gamitin Lia.language para sa iyong mga salita, itakda dir mula Lia.rtl, at mag-listen para sa languageChanged. Lia ay nagsasalita ng 13 wika; ang English ay isang magandang fallback.
• Gamitin ang Lia'na mga pindutan para sa pangunahing aksyon. Lia.mainButton nakaupo kung saan inaasahan ng mga tao, sa itaas ng home bar, sa Lia na kulay blue.
• Gamitin ang pindutang pabalik para sa iyong sariling mga screen. Ipakita Lia.backButton isa pang screen, at ayusin onClick; itago ito sa unang screen mo.
• Gamitin ang Lia'ang mga usapan. Lia.confirm, Lia.showPopup at Lia.toast mukhang pareho ng iba pang mga bagay sa Lia at binabasa mula kaliwa patungo kanan kapag dapat.
• Nararamdaman ito. Lia.haptic("selection") para sa mga pagpili, "success" at "error" para sa mga resulta. Hindi lahat ng frame.
• Pansin sa tunog. Maglaro lamang habang Lia.soundOn, at tumigil sa soundChanged at pause.
• Pumigil sa pause. Mga timer, game loops, musika at sockets na may kahalagahan.
• Magtanong bago isara ang isang laro na nasa proseso kasama Lia.enableClosingConfirmation(), at i-off ito kapag ito'naka-bukas.
• I-stop ang mga swipes na magbubukas ng isang laro na gumagamit nito kasama Lia.disableVerticalSwipes().
• Wala pang hover, wala pang maliit na mga target. Ito's isang phone: 44 px tap targets sa pinaka-mababa, at walang text selection sa mga button.

#Magkulay ng iyong header

Kung ang iyong app ay may malakas na kulay ng sarili nito, bigyan ng Lia'ang header at background ang pareho:

Lia.setHeaderColor("#0E1A3A");
Lia.setBackgroundColor("#0E1A3A");

Lia ay nagbabago ng header'ang teksto at mga button ay madilim o liwanag para sumukat.

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