Meta-tags

Binnen uw <head>-tag geven <meta>-tags informatie over titel en uitgever en stellen ze ons in staat gebruikersinvoer te ontvangen. Er zijn zes gebruikersaanpasbare besturingselementen: getalschuifregelaars, tintschuifregelaars, booleaanse schakelaars, kleurkiezers, tekstvelden en keuzelijsten. Elk besturingselement vereist vier kernattributen plus besturingselement-specifieke attributen.

	Kernattribuut	Beschrijving
	property	Definieert de variabelenaam die in uw code wordt gebruikt
	label	Het tekstlabel dat aan gebruikers wordt getoond voor de besturingsinterface
	type	Specificeert het gegevenstype: number, hue, boolean of color
	default	Stelt de beginwaarde in die door het besturingselement wordt gebruikt
	tooltip*	(*Optioneel) Geeft een korte beschrijving weer wanneer de gebruiker over het besturingselement zweeft

Getalschuifregelaar

Een getalschuifregelaar stelt de gebruiker in staat een geheel getal te kiezen binnen een specifiek bereik. Het wordt veel gebruikt om parameters aan te passen, zoals hoe snel een animatie loopt, hoeveel vormen op het scherm verschijnen, of hoe vaak een effect wordt geactiveerd.

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

Zo ziet het er in de praktijk uit:

De getalschuifregelaar heeft twee extra attributen nodig om correct te werken:

Attribuut	Beschrijving
min	Stelt de laagste waarde in die de gebruiker kan kiezen.
max	Stelt de hoogste waarde in die de gebruiker kan kiezen.

Tintschuifregelaar

Een tintschuifregelaar laat de gebruiker een kleurtint selecteren met het HSL-kleurmodel (Hue, Saturation, Lightness). Het wordt doorgaans gebruikt voor eenvoudige kleuraanpassingen of het kiezen van een basiskleur voor effecten en elementen.

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

Visueel ziet het er zo uit:

Om correct te functioneren vereist de tintschuifregelaar twee aanvullende attributen:

Attribuut	Beschrijving
min	Definieert de laagste tintwaarde die de gebruiker kan selecteren. De minimaal mogelijke waarde is 0
max	Definieert de hoogste beschikbare tintwaarde. De maximaal mogelijke waarde is 360

Booleaans

Een booleaanse schakelaar laat de gebruiker schakelen tussen twee toestanden: “aan” en “uit”. De waarden zijn beperkt tot 0 (uit) of 1 (aan). In tegenstelling tot andere besturingselementen zijn booleans uitsluitend afhankelijk van standaardattributen en vereisen ze geen aanvullende configuratie.

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

Ze worden veel gebruikt om specifieke functies in of uit te schakelen, tussen modi te schakelen (zoals verticaal en horizontaal), zichtbaarheid en gedragsschakelaars in een interface te beheren, of het herspelen van effecten te activeren.

Hier is een voorbeeld van hoe het eruitziet:

Kleurkiezer

Een kleurkiezer stelt de gebruiker in staat een kleur te selecteren door de tint-, verzadigings- en helderheidscomponenten aan te passen binnen het standaard HSL-kleurmodel. Het is het meest gebruikte en standaard hulpmiddel voor het kiezen van kleuren, of het nu voor achtergronden of schermonderdelen is.

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

Visueel ziet het er zo uit:

De standaardwaarde voor de kleurkiezer moet worden opgegeven in hexadecimaal formaat. Bovendien zijn er twee extra attributen nodig:

Attribuut	Beschrijving
min	De minimaal selecteerbare waarde, laagst mogelijke waarde is 0.
max	De maximaal selecteerbare waarde, hoogst mogelijke waarde is 360.

Tekstveld

Een tekstveld, of tekstinvoervak, laat de gebruiker een reeks tekens invoeren. De invoer wordt bijgewerkt elke keer dat een teken wordt toegevoegd aan of verwijderd uit het veld.

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

Zo ziet het eruitziet:

Attribuut	Beschrijving
default	kan geen tekens bevatten

Lijst

Een lijst laat de gebruiker één optie selecteren uit een vooraf gedefinieerde lijst van waarden. De gebruiker kan bijvoorbeeld schakelen tussen verschillende personagekeuzes of effecten om de gewenste optie te kiezen.

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

Zo ziet het er in de praktijk uit:

Het attribuut values definieert alle beschikbare keuzes, terwijl het attribuut default aangeeft welke optie aanvankelijk is geselecteerd.

Attribuut	Beschrijving
values	Een kommagescheiden lijst van mogelijke tekenreeksopties
default	Stelt de standaard geselecteerde optie in. Als deze waarde niet is opgenomen in de waardenlijst, toont de keuzelijst geen standaardselectie en kunnen er problemen optreden.

Voor meer informatie over het verzamelen van ruwe gegevens uit uw applicatie, bekijk onze pagina Smart Tags!