Packages
@lia-labs/elements
Kopya ang pahina
Ang Lia SDK bilang custom elements, para sa anumang pahina at anumang framework. Ilagay ang isang element sa pahina at gagawa ito ng kanyang trabaho habang nasa doon.
npm install @lia-labs/elementsO nang walang isang build step:
<script src="https://unpkg.com/@lia-labs/elements/dist/auto.global.js"></script>Ang script build ay nagpaparehistro ng mga elemento habang ito ay nag-load at inilalagay ang buong SDK sa window.liaElements. Gamit ang isang bundler, i-register ang mga ito nang isang beses:
import { defineLiaElements } from '@lia-labs/elements';
defineLiaElements();#Isang app
<lia-app auto-ready></lia-app>
<lia-main-button text="Buy extra lives"></lia-main-button>
<button id="play">Play</button>
<div id="game"></div>
<script>
document.querySelector('lia-main-button').addEventListener('lia-click', function () {
liaElements.pay('extra-lives');
});
document.querySelector('lia-app').addEventListener('lia-ready', function (event) {
console.log('Hello, @' + event.detail.player.name);
});
// While a game runs: a back button and closing confirmation, gone when the game ends.
var game = document.getElementById('game');
document.getElementById('play').onclick = function () {
game.innerHTML = '<lia-back-button></lia-back-button><lia-closing-confirmation></lia-closing-confirmation>';
game.querySelector('lia-back-button').addEventListener('lia-click', function () { game.innerHTML = ''; });
};
</script>Ang mga elemento ay walang anumang bagay sa iyong pahina: bawat isa ay kontrol ng bahagi ng Lia habang ito's sa dokumento. Ang pagtanggal nito (o ng isang magulang) ay itatago ang button o itatigil ang paghawak. Ang mga elemento sa loob ng isang hidden nagbabawas pa rin ang bilang: idagdag at alisin sila sa halip.
#Mga elemento
| Elemento | Habang ito'nasa pahina | Mga katangian | Mga event |
|---|---|---|---|
<lia-app> | Mga tawag init(), pagkatapos ay nagtatakda ready (o error) sa kanyang sarili | auto-ready mga tawag ready() pagkatapos ng unang frame; no-css-vars | lia-ready (detalye: ang resulta ng init), lia-error |
<lia-main-button> | Lia's pangunahing button | text, color, text-color, disabled, progress, shine | lia-click |
<lia-secondary-button> | Ang pangalawang pindutan | Ang pareho, at position | lia-click |
<lia-back-button> | Ang header'na pindutan ng back | lia-click | |
<lia-settings-button> | Mga setting sa menu ng ⋯ | lia-click | |
<lia-closing-confirmation> | Lia ay nagsusuring bago i-close | ||
<lia-swipe-lock> | Isang swipe down ay nanalo't isara ang sheet | ||
<lia-banner> | Isang banner Lia na nakadock sa gilid habang ito'nasa pahina (ang iyong pahina ay mas maikli upang magkasya ito) | position: bottom (ang default) o top |
Ang pagbabago ng isang attribute ay nagpapabago sa pindutan: button.setAttribute('progress', '') ipinapakita ang kanyang spinner, button.toggleAttribute('disabled', true) nagiging asul ito.
Awtomatikong isinalin. Ang English ay ang source of truth. Basahin sa Ingles