Paquets
@lia-labs/elements
Copier la page
Les Lia SDK en éléments personnalisés, pour n'importe quelle page et n'importe quel framework. Placez un élément sur la page et il fait son travail tant qu'il est là.
npm install @lia-labs/elementsOu sans étape de construction :
<script src="https://unpkg.com/@lia-labs/elements/dist/auto.global.js"></script>Le script de construction enregistre les éléments pendant le chargement et place l'ensemble du SDK sur window.liaElements. Avec un bundler, enregistrez-les une fois :
import { defineLiaElements } from '@lia-labs/elements';
defineLiaElements();#Une application
<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>Les éléments n'affichent rien sur votre page : chacun contrôle une partie de Lia pendant qu'il'dans le document. En supprimant (ou un parent) le bouton est masqué ou la saisie est arrêtée. Les éléments à l'intérieur d'un hidden les parents comptent toujours : ajoutez et supprimez-les au lieu de cela.
#Éléments
| Élément | Tant que'sur la page (votre page devient plus courte pour l'accueillir) | Attributs | Événements |
|---|---|---|---|
<lia-app> | Appels init(), puis définit ready (ou error) sur lui-même | auto-ready appels ready() après la première image ; no-css-vars | lia-ready (détail : le résultat de l'initialisation), lia-error |
<lia-main-button> | Lia'bouton principal | text, color, text-color, disabled, progress, shine | lia-click |
<lia-secondary-button> | Le deuxième bouton | La même chose, et position | lia-click |
<lia-back-button> | L'en-tête'le bouton retour | lia-click | |
<lia-settings-button> | Paramètres dans le menu ⋯ | lia-click | |
<lia-closing-confirmation> | Lia demande avant de fermer | ||
<lia-swipe-lock> | Un glissement vers le bas a gagné'ne pas fermer la feuille | ||
<lia-banner> | Une bannière Lia s'ancrage au bord pendant qu'elle'sur. | position: bottom (le par défaut) ou top |
Changer un attribut met à jour le bouton : button.setAttribute('progress', '') affiche sa roue de chargement, button.toggleAttribute('disabled', true) le rend grisé.
Traduit automatiquement. L'anglais est la source de vérité. Lire en anglais