Paketan

@lia-labs/elements

Salin halaman

The Lia SDK sebagai elemen kustom, untuk halaman apa pun dan kerangka apa pun. Letakkan elemen di halaman dan itu melakukan tugasnya selama ada di sana.

npm install @lia-labs/elements

Atau tanpa langkah build:

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

Skrip build mendaftarkan elemen saat dimuat dan menempatkan seluruh SDK pada window.liaElements. Dengan bundler, daftarkan mereka sekali:

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

#Aplikasi

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

Elemen-elemen ini tidak menggambar apa pun di halaman Anda: masing-masing mengontrol bagian dari Lia saat itu'di dokumen. Menghapusnya (atau induknya) menyembunyikan tombol atau mengakhiri pegangan. Elemen di dalam hidden orang tua tetap dihitung: tambahkan dan hapus mereka saja.

#Elemen

Elemen	Sementara itu'di halaman	Atribut	Peristiwa
`<lia-app>`	Panggilan `init()`, lalu menetapkan `ready` (atau `error`) pada dirinya sendiri	`auto-ready` panggilan `ready()` setelah frame pertama; `no-css-vars`	`lia-ready` (detail: hasil inisialisasi), `lia-error`
`<lia-main-button>`	Lia'tombol utama	`text`, `color`, `text-color`, `disabled`, `progress`, `shine`	`lia-click`
`<lia-secondary-button>`	Tombol sekunder	Yang sama, dan `position`	`lia-click`
`<lia-back-button>`	Header'tombol kembali		`lia-click`
`<lia-settings-button>`	Pengaturan dalam menu ⋯		`lia-click`
`<lia-closing-confirmation>`	Lia bertanya sebelum menutup
`<lia-swipe-lock>`	Sebuah geser ke bawah menang'tidak tutup lembaran
`<lia-banner>`	Sebuah banner Lia terkunci di tepi sementara itu'di halaman (halaman Anda menjadi lebih pendek untuk menyesuaikannya)	`position`: `bottom` (default) atau `top`

Mengubah atribut memperbarui tombol: button.setAttribute('progress', '') menampilkan spinner-nya, button.toggleAttribute('disabled', true) mengaburkannya.

Diterjemahkan otomatis. Bahasa Inggris adalah sumber kebenaran. Baca dalam Bahasa Inggris