Meta-taggar

Inuti din <head>-tagg ger <meta>-taggar information om titel och utgivare och möjliggör att vi kan ta emot användarinmatning. Det finns sex användarkonfigurerbara kontroller: nummerreglage, hue-reglage, booleanska växlar, färgväljare, textfält och kombinationsrutor. Varje kontroll kräver fyra kärnattribut, plus kontrollspecifika attribut.

	Kärnattribut	Beskrivning
	property	Definierar variabelnamnet som ska användas i din kod
	label	Textetiketten som visas för användare i kontrollgränssnittet
	type	Anger datatypen: number, hue, boolean eller color
	default	Anger det initiala värdet som används av kontrollen
	tooltip*	(*Valfritt) Visar en kort beskrivning när användaren hovrar över kontrollen

Nummerreglage

Ett nummerreglage låter användaren välja ett heltal inom ett specifikt intervall. Det används vanligtvis för att justera parametrar som hur snabbt en animation körs, hur många former som visas på skärmen, eller hur ofta en effekt utlöses.

<meta property="myNum" label="Number Control" type="number" default="5" min="0" max="10">

Det ser ut så här i praktiken:

Nummerreglaget behöver två extra attribut för att fungera korrekt:

Attribut	Beskrivning
min	Anger det lägsta värdet användaren kan välja.
max	Anger det högsta värdet användaren kan välja.

Hue-reglage

Ett hue-reglage låter användaren välja en färgton med hjälp av HSL-färgmodellen (Hue, Saturation, Lightness). Det används vanligtvis för grundläggande färgjusteringar eller för att välja en basfärg för effekter och element.

<meta property="myHuePicker" label="Hue Picker Control" type="hue" default="120" min="0" max="360">

Visuellt ser det ut så här:

För att fungera korrekt kräver hue-reglaget två ytterligare attribut:

Attribut	Beskrivning
min	Definierar det lägsta hue-värdet användaren kan välja. Det lägsta möjliga värdet är 0
max	Definierar det högsta hue-värdet som är tillgängligt. Det högsta möjliga värdet är 360

Booleansk

En booleansk växel låter användaren växla mellan två tillstånd: “på” och “av”. Dess värden är begränsade till antingen 0 (av) eller 1 (på). Till skillnad från andra kontroller förlitar sig booleanska kontroller enbart på standardattribut och kräver ingen ytterligare konfiguration.

<meta property="myBool" label="Boolean Control" type="boolean" default="0"/>

De används vanligtvis för att aktivera eller inaktivera specifika funktioner, växla mellan lägen (som vertikalt och horisontellt), kontrollera synlighets- och beteendeväxlar i ett gränssnitt, eller utlösa uppspelning av effekter.

Här är ett exempel på hur det ser ut:

Färgväljare

En färgväljare låter användaren välja en färg genom att justera dess hue-, mättnads- och ljushetskomponenter inom den standard HSL-färgmodellen. Det är det vanligaste och standardverktyget för att välja färger, oavsett om det gäller bakgrunder eller element på skärmen.

<meta property="myColorpicker1" label="Colorpicker Control" type="color" default="#009bde" min="0" max="360"/>

Visuellt ser det ut så här:

Standardvärdet för färgväljaren måste anges i hexadecimalt format. Dessutom kräver den två extra attribut:

Attribut	Beskrivning
min	Det minsta valbara värdet, lägsta möjliga värde är 0.
max	Det högsta valbara värdet, högsta möjliga värde är 360.

Textfält

Ett textfält, eller textinmatningsruta, låter användaren ange en teckensträng. Inmatningen uppdateras varje gång ett tecken läggs till eller tas bort från fältet.

<meta property="myText" label="Text Field" type="textfield" default="yourText">

Det här är hur det ser ut:

Attribut	Beskrivning
default	kan innehålla inga tecken

Lista

En lista låter användaren välja ett alternativ från en fördefinierad lista med värden. Användaren kan t.ex. växla mellan olika karaktärsval eller effekter för att välja sitt önskade alternativ.

<meta property="effectChoice" label="Effect Choice" type="list" values="Low Health,Option1,Option2,Option3"
    default="Low Health"/>

Det ser ut så här i praktiken:

Attributet values definierar alla tillgängliga val, medan attributet default anger vilket alternativ som är valt från början.

Attribut	Beskrivning
values	En kommaseparerad lista med möjliga strängsalternativ
default	Anger det valda standardalternativet. Om det här värdet inte ingår i values-listan visar kombinationsrutan inget standardval och kan orsaka problem.

För mer information om att samla in rådata från ditt program, kolla in vår sida Smart-taggar!