Paquetes
@lia-labs/elements
Copiar página
El Lia SDK como elementos personalizados, para cualquier página y cualquier framework. Coloca un elemento en la página y hace su trabajo mientras esté allí.
npm install @lia-labs/elementsO sin un paso de compilación:
<script src="https://unpkg.com/@lia-labs/elements/dist/auto.global.js"></script>El script de construcción registra los elementos a medida que se cargan y coloca todo SDK en window.liaElements. Con un empaquetador, regístrelos una vez:
import { defineLiaElements } from '@lia-labs/elements';
defineLiaElements();#Una 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>Los elementos no dibujan nada en tu página: cada uno controla una parte de Lia mientras que's en el documento. Al eliminarlo (o un padre) se oculta el botón o se termina la retención. Los elementos dentro de un hidden los padres aún cuentan: agréguelos y elimínelos en su lugar.
#Elementos
| Elemento | Mientras que'en la página | Atributos | Eventos |
|---|---|---|---|
<lia-app> | Llamadas init(), entonces establece ready (o error) en sí mismo | auto-ready llamadas ready() después del primer marco; no-css-vars | lia-ready (detalle: el resultado de la inicialización), lia-error |
<lia-main-button> | Lia'tu botón principal | text, color, text-color, disabled, progress, shine | lia-click |
<lia-secondary-button> | El segundo botón | Lo mismo, y position | lia-click |
<lia-back-button> | El encabezado's botón de retroceso | lia-click | |
<lia-settings-button> | Configuraciones en el menú ⋯ | lia-click | |
<lia-closing-confirmation> | Lia pregunta antes de cerrar | ||
<lia-swipe-lock> | Un deslizar hacia abajo ganó'cerrar la hoja | ||
<lia-banner> | Un banner Lia se fija en el borde mientras que se'en la página (tu página se hace más corta para ajustarse) | position: bottom (el predeterminado) o top |
Cambiar un atributo actualiza el botón: button.setAttribute('progress', '') muestra su indicador de carga, button.toggleAttribute('disabled', true) lo desactiva.
Traducido automáticamente. El inglés es la fuente de verdad. Leer en inglés