Pacotes
@lia-labs/elements
Copiar página
O Lia SDK como elementos personalizados, para qualquer página e qualquer framework. Coloque um elemento na página e ele faz seu trabalho enquanto estiver lá.
npm install @lia-labs/elementsOu sem um passo de compilação:
<script src="https://unpkg.com/@lia-labs/elements/dist/auto.global.js"></script>O script de construção registra os elementos enquanto carrega e coloca todo SDK em window.liaElements. Com um bundler, registre-os uma vez:
import { defineLiaElements } from '@lia-labs/elements';
defineLiaElements();#Um 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>Os elementos não desenham nada na sua página: cada um controla uma parte de Lia enquanto ele's no documento. Removendo-o (ou um pai) oculta o botão ou encerra a retenção. Elementos dentro de um hidden os pais ainda contam: adicione e remova-os em vez disso.
#Elementos
| Elemento | Enquanto ele's na página | Atributos | Eventos |
|---|---|---|---|
<lia-app> | Chamadas init(), então define ready (ou error) em si | auto-ready chamadas ready() após o primeiro quadro; no-css-vars | lia-ready (detalhe: o resultado do init), lia-error |
<lia-main-button> | Lia's mapas, diga) no seu próprio servidor ou divida-os entre chaves e leia-os de volta com | text, color, text-color, disabled, progress, shine | lia-click |
<lia-secondary-button> | O segundo botão | O mesmo, e position | lia-click |
<lia-back-button> | O cabeçalho's botão de voltar | lia-click | |
<lia-settings-button> | Configurações no menu ⋯ | lia-click | |
<lia-closing-confirmation> | Lia pergunta antes de fechar | ||
<lia-swipe-lock> | Uma deslizamento para baixo venceu'não feche a planilha | ||
<lia-banner> | Um banner Lia se fixa na borda enquanto ele's na página (sua página fica mais curta para caber) | position: bottom (o padrão) ou top |
Alterar um atributo atualiza o botão: button.setAttribute('progress', '') mostra seu indicador de carregamento, button.toggleAttribute('disabled', true) deixa-o cinza.
Traduzido automaticamente. O inglês é a fonte de verdade. Leia em inglês