Packages

@lia-labs/elements

Copy page

The Lia SDK as custom elements, for any page and any framework. Put an element on the page and it does its job while it's there.

Terminal

npm install @lia-labs/elements

Or without a build step:

HTML

<script src="https://unpkg.com/@lia-labs/elements/dist/auto.global.js"></script>

The script build registers the elements as it loads and puts the whole SDK on window.liaElements. With a bundler, register them once:

TypeScript

import { defineLiaElements } from '@lia-labs/elements';
defineLiaElements();

#An app

HTML

<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>

The elements draw nothing on your page: each one controls a part of Lia while it's in the document. Removing it (or a parent) hides the button or ends the hold. Elements inside a hidden parent still count: add and remove them instead.

#Elements

Element	While it's on the page	Attributes	Events
`<lia-app>`	Calls `init()`, then sets `ready` (or `error`) on itself	`auto-ready` calls `ready()` after the first frame; `no-css-vars`	`lia-ready` (detail: the init result), `lia-error`
`<lia-main-button>`	Lia's main button	`text`, `color`, `text-color`, `disabled`, `progress`, `shine`	`lia-click`
`<lia-secondary-button>`	The secondary button	The same, and `position`	`lia-click`
`<lia-back-button>`	The header's back button		`lia-click`
`<lia-settings-button>`	Settings in the ⋯ menu		`lia-click`
`<lia-closing-confirmation>`	Lia asks before closing
`<lia-swipe-lock>`	A swipe down won't close the sheet

Changing an attribute updates the button: button.setAttribute('progress', '') shows its spinner, button.toggleAttribute('disabled', true) greys it out.