Tag Meta
Di dalam tag <head> Anda, tag <meta> memberikan maklumat tentang tajuk dan penerbit serta membolehkan kami menerima input pengguna. Terdapat enam kawalan yang boleh disesuaikan oleh pengguna: gelangsar nombor, gelangsar hue, suis boolean, pemilih warna, medan teks, dan kotak kombo. Setiap kawalan memerlukan empat atribut teras, ditambah atribut khusus kawalan.
| Atribut Teras | Deskripsi | |
|---|---|---|
| property | Menentukan nama pemboleh ubah yang akan digunakan dalam kod Anda | |
| label | Label teks yang ditunjukkan kepada pengguna untuk antara muka kawalan | |
| type | Menentukan jenis data: number, hue, boolean, atau color | |
| default | Menetapkan nilai awal yang digunakan oleh kawalan | |
| tooltip* | (*Pilihan) Memaparkan deskripsi ringkas apabila pengguna menuding ke atas kawalan |
Gelangsar Nombor
Section titled “Gelangsar Nombor”Gelangsar nombor membolehkan pengguna memilih nombor bulat dalam julat tertentu. Ia biasanya digunakan untuk melaraskan parameter seperti kecepatan animasi berjalan, berapa banyak bentuk yang muncul pada skrin, atau seberapa kerap kesan dicetuskan.
<meta property="myNum" label="Number Control" type="number" default="5" min="0" max="10">Kelihatan seperti ini dalam amalan:
Gelangsar nombor memerlukan dua atribut tambahan untuk berfungsi dengan betul:
| Atribut | Deskripsi |
|---|---|
| min | Menetapkan nilai terendah yang boleh dipilih pengguna. |
| max | Menetapkan nilai tertinggi yang boleh dipilih pengguna. |
Gelangsar Hue
Section titled “Gelangsar Hue”Gelangsar hue membolehkan pengguna memilih hue warna menggunakan model warna HSL (Hue, Saturation, Lightness). Ia biasanya digunakan untuk pelarasan warna asas atau memilih warna asas untuk kesan dan elemen.
<meta property="myHuePicker" label="Hue Picker Control" type="hue" default="120" min="0" max="360">Secara visual, kelihatan seperti ini:
Untuk berfungsi dengan betul, gelangsar hue memerlukan dua atribut tambahan:
| Atribut | Deskripsi |
|---|---|
| min | Menentukan nilai hue terendah yang boleh dipilih pengguna. Nilai minimum yang mungkin ialah 0 |
| max | Menentukan nilai hue tertinggi yang tersedia. Nilai maksimum yang mungkin ialah 360 |
Boolean
Section titled “Boolean”Suis boolean membolehkan pengguna bertukar antara dua keadaan: “hidup” dan “mati”. Nilainya terhad kepada sama ada 0 (mati) atau 1 (hidup). Berbeza dengan kawalan lain, boolean hanya bergantung pada atribut lalai dan tidak memerlukan konfigurasi tambahan.
<meta property="myBool" label="Boolean Control" type="boolean" default="0"/>Ia biasanya digunakan untuk mendayakan atau menyahaktifkan ciri tertentu, bertukar antara mod (seperti menegak dan mendatar), mengawal togol keterlihatan dan tingkah laku dalam antara muka, atau mencetuskan ulangan kesan.
Berikut adalah contoh bagaimana ia kelihatan:
Pemilih Warna
Section titled “Pemilih Warna”Pemilih warna membolehkan pengguna memilih warna dengan melaraskan komponen hue, saturasi, dan kecerahan dalam model warna HSL standard. Ia adalah alat yang paling biasa dan standard yang digunakan untuk memilih warna, sama ada untuk latar belakang atau elemen pada skrin.
<meta property="myColorpicker1" label="Colorpicker Control" type="color" default="#009bde" min="0" max="360"/>Secara visual, kelihatan seperti ini:
Nilai lalai untuk pemilih warna mesti ditentukan dalam format heksadesimal. Selain itu, ia memerlukan dua atribut tambahan:
| Atribut | Deskripsi |
|---|---|
| min | Nilai minimum yang boleh dipilih, nilai terendah yang mungkin ialah 0. |
| max | Nilai maksimum yang boleh dipilih, nilai tertinggi yang mungkin ialah 360. |
Medan Teks
Section titled “Medan Teks”Medan teks, atau kotak input teks, membolehkan pengguna memasukkan rentetan aksara. Input dikemas kini setiap kali aksara ditambah atau dibuang dari medan.
<meta property="myText" label="Text Field" type="textfield" default="yourText">Inilah rupa tampilannya:
| Atribut | Deskripsi |
|---|---|
| default | boleh tidak mengandungi aksara |
Senarai
Section titled “Senarai”Senarai membolehkan pengguna memilih satu pilihan daripada senarai nilai yang telah ditentukan. Sebagai contoh, pengguna boleh bertukar antara pilihan aksara atau kesan yang berbeza untuk memilih pilihan yang mereka sukai.
<meta property="effectChoice" label="Effect Choice" type="list" values="Low Health,Option1,Option2,Option3" default="Low Health"/>Kelihatan seperti ini dalam amalan:
Atribut values mentakrifkan semua pilihan yang tersedia, manakala atribut default menentukan pilihan mana yang dipilih pada awalnya.
| Atribut | Deskripsi |
|---|---|
| values | Senarai pilihan rentetan yang mungkin, dipisahkan dengan koma |
| default | Menetapkan pilihan lalai yang dipilih. Jika nilai ini tidak disertakan dalam senarai values, kotak kombo akan tidak menunjukkan pilihan lalai dan mungkin menyebabkan masalah. |
Untuk maklumat lanjut tentang mengumpulkan data mentah daripada aplikasi Anda, lihat halaman Smart Tags kami!