Meta-tagovi
Unutar <head> taga, <meta> tagovi pružaju informacije o naslovu i izdavaču i omogućavaju primanje korisničkog unosa. Postoji šest prilagodljivih kontrola: numerički klizač, birač nijanse, boolean prekidač, birač boja, tekstualna polja i liste. Svaka kontrola zahteva četiri osnovna atributa, kao i atribute specifične za tu kontrolu.
| Osnovni atribut | Opis | |
|---|---|---|
| property | Definiše naziv promenljive koja se koristi u kodu | |
| label | Tekstualna oznaka prikazana korisnicima za kontrolu | |
| type | Navodi tip podataka: number, hue, boolean ili color | |
| default | Postavlja početnu vrednost kontrole | |
| tooltip* | (*Opcionalno) Prikazuje kratki opis kada korisnik pređe mišem preko kontrole |
Numerički klizač
Section titled “Numerički klizač”Numerički klizač omogućava korisniku da izabere celi broj unutar određenog opsega. Često se koristi za podešavanje parametara kao što su brzina animacije, broj prikazanih oblika ili učestalost kojom se efekat aktivira.
<meta property="myNum" label="Number Control" type="number" default="5" min="0" max="10">U praksi izgleda ovako:
Numerički klizač zahteva dva dodatna atributa za ispravno funkcionisanje:
| Atribut | Opis |
|---|---|
| min | Postavlja najnižu vrednost koju korisnik može izabrati. |
| max | Postavlja najvišu vrednost koju korisnik može izabrati. |
Birač nijanse
Section titled “Birač nijanse”Birač nijanse omogućava korisniku da izabere nijansu koristeći HSL model boja (Hue, Saturation, Lightness). Tipično se koristi za jednostavna podešavanja boja ili odabir osnovne boje za efekte i elemente.
<meta property="myHuePicker" label="Hue Picker Control" type="hue" default="120" min="0" max="360">Vizuelno izgleda ovako:
Za ispravno funkcionisanje birača nijanse potrebna su dva dodatna atributa:
| Atribut | Opis |
|---|---|
| min | Definiše najnižu vrednost nijanse koju korisnik može izabrati. Najmanji mogući vrednost je 0 |
| max | Definiše najvišu dostupnu vrednost nijanse. Najveća moguća vrednost je 360 |
Boolean
Section titled “Boolean”Boolean prekidač omogućava korisniku da bira između dva stanja: “uključeno” i “isključeno”. Njegove vrednosti su ograničene na 0 (isključeno) ili 1 (uključeno). Za razliku od ostalih kontrola, boolean se oslanja isključivo na atribut default i ne zahteva dodatnu konfiguraciju.
<meta property="myBool" label="Boolean Control" type="boolean" default="0"/>Često se koristi za aktiviranje ili deaktiviranje određenih funkcija, prebacivanje između režima (npr. vertikalni i horizontalni), upravljanje vidljivošću i prekidačima ponašanja u interfejsu ili pokretanje reprodukcije efekata.
Ovako izgleda na ekranu:
Birač boja
Section titled “Birač boja”Birač boja omogućava korisniku da izabere boju podešavanjem komponenti nijanse, zasićenja i osvetljenosti unutar standardnog HSL modela boja. To je najčešće i standardno sredstvo za odabir boja, bilo za pozadine ili elemente ekrana.
<meta property="myColorpicker1" label="Colorpicker Control" type="color" default="#009bde" min="0" max="360"/>Vizuelno izgleda ovako:
Podrazumevana vrednost za birač boja mora biti navedena u heksadecimalnom formatu. Pored toga, potrebna su dva dodatna atributa:
| Atribut | Opis |
|---|---|
| min | Minimalna vrednost koja se može izabrati; najmanji mogući vrednost je 0. |
| max | Maksimalna vrednost koja se može izabrati; najveća moguća vrednost je 360. |
Tekstualno polje
Section titled “Tekstualno polje”Tekstualno polje omogućava korisniku da unese niz znakova. Unos se ažurira svaki put kada se znak doda ili ukloni iz polja.
<meta property="myText" label="Text Field" type="textfield" default="yourText">Ovako izgleda:
| Atribut | Opis |
|---|---|
| default | ne sme sadržati znakove |
Lista omogućava korisniku da izabere opciju iz unapred definisane liste vrednosti. Na primer, korisnik može birati između različitih opcija likova ili efekata da bi odabrao željenu opciju.
<meta property="effectChoice" label="Effect Choice" type="list" values="Low Health,Option1,Option2,Option3" default="Low Health"/>U praksi izgleda ovako:
Atribut values definiše sve dostupne opcije, dok atribut default navodi koja je opcija inicijalno izabrana.
| Atribut | Opis |
|---|---|
| values | Lista mogućih opcija niza znakova razdvojena zarezima |
| default | Postavlja podrazumevano izabranu opciju. Ako ova vrednost nije uključena u listu vrednosti, lista neće prikazivati podrazumevani izbor i može doći do problema. |
Za više informacija o preuzimanju sirovih podataka iz aplikacije, pogledajte našu stranicu Smart Tags!