Meta Tags
Di dalam tag <head> Anda, tag <meta> memberikan info tentang judul dan publisher serta memungkinkan kita menerima input pengguna. Ada enam kontrol yang dapat dikustomisasi pengguna: number slider, hue slider, boolean switch, color picker, text field, dan combo box. Setiap kontrol memerlukan empat atribut inti, ditambah atribut khusus kontrol.
| Atribut Inti | Deskripsi | |
|---|---|---|
| property | Mendefinisikan nama variabel yang akan digunakan dalam kode Anda | |
| label | Label teks yang ditampilkan kepada pengguna untuk antarmuka kontrol | |
| type | Menentukan tipe data: number, hue, boolean, atau color | |
| default | Menetapkan nilai awal yang digunakan oleh kontrol | |
| tooltip* | (*Opsional) Menampilkan deskripsi singkat saat pengguna mengarahkan kursor ke kontrol |
Number Slider
Section titled “Number Slider”Number slider memungkinkan pengguna memilih bilangan bulat dalam rentang tertentu. Ini biasanya digunakan untuk menyesuaikan parameter seperti seberapa cepat animasi berjalan, berapa banyak bentuk yang muncul di layar, atau seberapa sering efek dipicu.
<meta property="myNum" label="Number Control" type="number" default="5" min="0" max="10">Tampilannya seperti ini dalam praktiknya:
Number slider memerlukan dua atribut tambahan agar berfungsi dengan baik:
| Atribut | Deskripsi |
|---|---|
| min | Menetapkan nilai terendah yang dapat dipilih pengguna. |
| max | Menetapkan nilai tertinggi yang dapat dipilih pengguna. |
Hue Slider
Section titled “Hue Slider”Hue slider memungkinkan pengguna memilih hue warna menggunakan model warna HSL (Hue, Saturation, Lightness). Ini biasanya digunakan untuk penyesuaian warna dasar atau memilih warna dasar untuk efek dan elemen.
<meta property="myHuePicker" label="Hue Picker Control" type="hue" default="120" min="0" max="360">Secara visual, tampilannya seperti ini:
Agar berfungsi dengan benar, hue slider memerlukan dua atribut tambahan:
| Atribut | Deskripsi |
|---|---|
| min | Mendefinisikan nilai hue terendah yang dapat dipilih pengguna. Nilai minimum yang mungkin adalah 0 |
| max | Mendefinisikan nilai hue tertinggi yang tersedia. Nilai maksimum yang mungkin adalah 360 |
Boolean
Section titled “Boolean”Boolean switch memungkinkan pengguna beralih antara dua status: “on” dan “off”. Nilainya terbatas pada 0 (off) atau 1 (on). Tidak seperti kontrol lainnya, boolean hanya mengandalkan atribut default dan tidak memerlukan konfigurasi tambahan.
<meta property="myBool" label="Boolean Control" type="boolean" default="0"/>Boolean biasanya digunakan untuk mengaktifkan atau menonaktifkan fitur tertentu, beralih antara mode (seperti vertikal dan horizontal), mengontrol visibilitas dan toggle perilaku dalam antarmuka, atau memicu ulang efek.
Berikut contoh tampilannya:
Color Picker
Section titled “Color Picker”Color picker memungkinkan pengguna memilih warna dengan menyesuaikan komponen hue, saturation, dan lightness dalam model warna HSL standar. Ini adalah alat yang paling umum dan standar digunakan untuk memilih warna, baik untuk latar belakang maupun elemen di layar.
<meta property="myColorpicker1" label="Colorpicker Control" type="color" default="#009bde" min="0" max="360"/>Secara visual, tampilannya seperti ini:
Nilai default untuk color picker harus ditentukan dalam format heksadesimal. Selain itu, diperlukan dua atribut tambahan:
| Atribut | Deskripsi |
|---|---|
| min | Nilai minimum yang dapat dipilih, nilai terendah yang mungkin adalah 0. |
| max | Nilai maksimum yang dapat dipilih, nilai tertinggi yang mungkin adalah 360. |
Text Field
Section titled “Text Field”Text field, atau kotak input teks, memungkinkan pengguna memasukkan string karakter. Input diperbarui setiap kali karakter ditambahkan atau dihapus dari field.
<meta property="myText" label="Text Field" type="textfield" default="yourText">Tampilannya seperti ini:
| Atribut | Deskripsi |
|---|---|
| default | dapat berisi tanpa karakter |
List memungkinkan pengguna memilih satu opsi dari daftar nilai yang telah ditentukan. Misalnya, pengguna dapat beralih antara pilihan karakter atau efek yang berbeda untuk memilih opsi yang mereka sukai.
<meta property="effectChoice" label="Effect Choice" type="list" values="Low Health,Option1,Option2,Option3" default="Low Health"/>Tampilannya seperti ini dalam praktiknya:
Atribut values mendefinisikan semua pilihan yang tersedia, sementara atribut default menentukan opsi mana yang dipilih pada awalnya.
| Atribut | Deskripsi |
|---|---|
| values | Daftar opsi string yang mungkin, dipisahkan dengan koma |
| default | Menetapkan opsi default yang dipilih. Jika nilai ini tidak termasuk dalam daftar values, combo box tidak akan menampilkan pilihan default dan dapat menimbulkan masalah. |
Untuk info lebih lanjut tentang pengambilan data mentah dari aplikasi Anda, lihat halaman Smart Tags kami!