Meta Tags

Dentro da sua tag <head>, as tags <meta> fornecem informações sobre título e publicador e nos permitem receber entradas do usuário. Existem seis controles personalizáveis pelo usuário: sliders numéricos, sliders de matiz, switches booleanos, seletores de cor, campos de texto e caixas de lista. Cada controle requer quatro atributos principais, além de atributos específicos do controle.

	Atributo Principal	Descrição
	property	Define o nome da variável a ser usada no seu código
	label	O rótulo de texto exibido aos usuários na interface do controle
	type	Especifica o tipo de dado: number, hue, boolean ou color
	default	Define o valor inicial usado pelo controle
	tooltip*	(*Opcional) Exibe uma breve descrição quando o usuário passa o mouse sobre o controle

Slider Numérico

Um slider numérico permite ao usuário escolher um número inteiro dentro de um intervalo específico. É comumente usado para ajustar parâmetros como a velocidade de uma animação, quantas formas aparecem na tela ou com que frequência um efeito é acionado.

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

Veja como fica na prática:

O slider numérico precisa de dois atributos extras para funcionar corretamente:

Atributo	Descrição
min	Define o valor mais baixo que o usuário pode escolher.
max	Define o valor mais alto que o usuário pode escolher.

Slider de Matiz

Um slider de matiz permite ao usuário selecionar um matiz de cor usando o modelo de cor HSL (Matiz, Saturação, Luminosidade). É normalmente usado para ajustes básicos de cor ou para escolher uma cor base para efeitos e elementos.

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

Visualmente, fica assim:

Para funcionar corretamente, o slider de matiz requer dois atributos adicionais:

Atributo	Descrição
min	Define o valor de matiz mais baixo que o usuário pode selecionar. O valor mínimo possível é 0
max	Define o valor de matiz mais alto disponível. O valor máximo possível é 360

Booleano

Um switch booleano permite ao usuário alternar entre dois estados: “ligado” e “desligado”. Seus valores são restritos a 0 (desligado) ou 1 (ligado). Ao contrário de outros controles, os booleanos dependem apenas de atributos padrão e não requerem nenhuma configuração adicional.

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

São comumente usados para habilitar ou desabilitar recursos específicos, alternar entre modos (como vertical e horizontal), controlar visibilidade e toggles de comportamento em uma interface, ou acionar a repetição de efeitos.

Veja um exemplo de como aparece:

Seletor de Cor

Um seletor de cor permite ao usuário selecionar uma cor ajustando seus componentes de matiz, saturação e luminosidade dentro do modelo de cor HSL padrão. É a ferramenta mais comum e padrão usada para escolher cores, seja para fundos ou elementos na tela.

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

Visualmente, fica assim:

O valor padrão para o seletor de cor deve ser especificado no formato hexadecimal. Além disso, requer dois atributos extras:

Atributo	Descrição
min	O valor mínimo selecionável; o menor valor possível é 0.
max	O valor máximo selecionável; o maior valor possível é 360.

Campo de Texto

Um campo de texto, ou caixa de entrada de texto, permite ao usuário digitar uma string de caracteres. A entrada é atualizada toda vez que um caractere é adicionado ou removido do campo.

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

Veja como fica:

Atributo	Descrição
default	pode não conter nenhum caractere

Lista

Uma lista permite ao usuário selecionar uma opção de uma lista predefinida de valores. Por exemplo, o usuário pode alternar entre diferentes escolhas de personagem ou efeitos para escolher a opção preferida.

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

Veja como fica na prática:

O atributo values define todas as opções disponíveis, enquanto o atributo default especifica qual opção é selecionada inicialmente.

Atributo	Descrição
values	Uma lista separada por vírgulas de possíveis opções de string
default	Define a opção selecionada por padrão. Se esse valor não estiver incluído na lista de values, a caixa de lista não mostrará nenhuma seleção padrão e pode causar problemas.

Para mais informações sobre como coletar dados brutos do seu aplicativo, confira nossa página de Smart Tags!