Пакеты
@lia-labs/elements
Копировать страницу
The Lia SDK как пользовательские элементы, для любой страницы и любого фреймворка. Поместите элемент на страницу, и он выполнит свою работу, пока он там.
npm install @lia-labs/elementsИли без этапа сборки:
<script src="https://unpkg.com/@lia-labs/elements/dist/auto.global.js"></script>Скрипт сборки регистрирует элементы по мере загрузки и помещает всю SDK на window.liaElements. С бандлером зарегистрируйте их один раз:
import { defineLiaElements } from '@lia-labs/elements';
defineLiaElements();#Приложение
<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>Элементы ничего не рисуют на вашей странице: каждый из них контролирует часть Lia, пока он'в документе. Удаление его (или родителя) скрывает кнопку или завершает удержание. Элементы внутри hidden родитель все еще считается: добавляйте и удаляйте их вместо этого.
#Элементы
| Элемент | Пока оно'на странице | Атрибуты | События |
|---|---|---|---|
<lia-app> | Вызовы init(), затем устанавливает ready (или error) на себе | auto-ready вызовы ready() после первого кадра; no-css-vars | lia-ready (деталь: результат инициализации), lia-error |
<lia-main-button> | Lia'основная кнопка | text, color, text-color, disabled, progress, shine | lia-click |
<lia-secondary-button> | Вторая кнопка | То же самое, и position | lia-click |
<lia-back-button> | Заголовок'кнопка возврата | lia-click | |
<lia-settings-button> | Настройки в меню ⋯ | lia-click | |
<lia-closing-confirmation> | Lia спрашивает перед закрытием | ||
<lia-swipe-lock> | Свайп вниз выиграл't закрыть таблицу | ||
<lia-banner> | Баннер Lia прикрепляется к краю, пока он'на странице (ваша страница становится короче, чтобы вместить её) | position: bottom (по умолчанию) или top |
Изменение атрибута обновляет кнопку: button.setAttribute('progress', '') отображает свой индикатор загрузки, button.toggleAttribute('disabled', true) затемняет его.
Автоматически переведено. Английский — источник истины. Читать на английском