包

@lia-labs/elements

复制页面

的 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>`	标题's 返回按钮		`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) 把它变灰。

自动翻译。英语是真实来源。阅读英文