Meta Etiketleri

<head> etiketinizin içinde, <meta> etiketleri başlık ve yayıncı hakkında bilgi sağlar ve kullanıcı girdisi almamızı sağlar. Altı kullanıcı tarafından özelleştirilebilir kontrol vardır: sayı kaydırıcıları, ton kaydırıcıları, boolean anahtarları, renk seçiciler, metin alanları ve açılır kutular. Her kontrol, kontrole özgü niteliklere ek olarak dört temel nitelik gerektirir.

	Temel Nitelik	Açıklama
	property	Kodunuzda kullanılacak değişken adını tanımlar
	label	Kontrol arayüzünde kullanıcılara gösterilen metin etiketi
	type	Veri türünü belirtir: number, hue, boolean veya color
	default	Kontrol tarafından kullanılan başlangıç değerini ayarlar
	tooltip*	(*İsteğe bağlı) Kullanıcı kontrolün üzerine geldiğinde kısa bir açıklama gösterir

Sayı Kaydırıcısı

Sayı kaydırıcısı, kullanıcının belirli bir aralıkta tam sayı seçmesini sağlar. Genellikle bir animasyonun ne kadar hızlı çalışacağı, ekranda kaç şeklin görüneceği veya bir efektin ne sıklıkta tetikleneceği gibi parametreleri ayarlamak için kullanılır.

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

Pratikte şöyle görünür:

Sayı kaydırıcısının düzgün çalışması için iki ekstra niteliğe ihtiyacı vardır:

Nitelik	Açıklama
min	Kullanıcının seçebileceği en düşük değeri ayarlar.
max	Kullanıcının seçebileceği en yüksek değeri ayarlar.

Ton Kaydırıcısı

Ton kaydırıcısı, kullanıcının HSL (Ton, Doygunluk, Parlaklık) renk modelini kullanarak bir renk tonu seçmesini sağlar. Genellikle temel renk ayarlamaları veya efektler ve öğeler için temel renk seçimi amacıyla kullanılır.

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

Görsel olarak şöyle görünür:

Ton kaydırıcısının doğru çalışması için iki ek nitelik gerekir:

Nitelik	Açıklama
min	Kullanıcının seçebileceği en düşük ton değerini tanımlar. Mümkün olan minimum değer 0’dır
max	Mevcut en yüksek ton değerini tanımlar. Mümkün olan maksimum değer 360’tır

Boolean

Boolean anahtarı, kullanıcının “açık” ve “kapalı” olmak üzere iki durum arasında geçiş yapmasını sağlar. Değerleri yalnızca 0 (kapalı) veya 1 (açık) ile sınırlıdır. Diğer kontrollerden farklı olarak boolean’lar yalnızca varsayılan niteliklere dayanır ve ek yapılandırma gerektirmez.

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

Genellikle belirli özellikleri etkinleştirmek veya devre dışı bırakmak, modlar arasında geçiş yapmak (dikey ve yatay gibi), arayüzdeki görünürlük ve davranış geçişlerini kontrol etmek veya efektlerin tekrar oynatılmasını tetiklemek için kullanılır.

Nasıl göründüğüne dair bir örnek:

Renk Seçici

Renk seçici, kullanıcının standart HSL renk modeli içinde ton, doygunluk ve parlaklık bileşenlerini ayarlayarak bir renk seçmesini sağlar. Arka planlar veya ekrandaki öğeler için renk seçmede kullanılan en yaygın ve standart araçtır.

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

Görsel olarak şöyle görünür:

Renk seçicinin varsayılan değeri onaltılık biçimde belirtilmelidir. Ayrıca iki ekstra nitelik gerektirir:

Nitelik	Açıklama
min	Seçilebilir minimum değer, mümkün olan en düşük değer 0’dır.
max	Seçilebilir maksimum değer, mümkün olan en yüksek değer 360’tır.

Metin Alanı

Metin alanı veya metin giriş kutusu, kullanıcının bir karakter dizisi girmesini sağlar. Alana karakter eklendiğinde veya silindiğinde girdi güncellenir.

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

Şöyle görünür:

Nitelik	Açıklama
default	karakter içermeyebilir

Liste

Liste, kullanıcının önceden tanımlanmış bir değer listesinden bir seçenek seçmesini sağlar. Örneğin, kullanıcı farklı karakter seçenekleri veya efektler arasında geçiş yaparak tercih ettiğini seçebilir.

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

Pratikte şöyle görünür:

values niteliği mevcut tüm seçenekleri tanımlarken, default niteliği başlangıçta hangi seçeneğin seçili olduğunu belirtir.

Nitelik	Açıklama
values	Virgülle ayrılmış olası dize seçenekleri listesi
default	Varsayılan seçili seçeneği ayarlar. Bu değer values listesinde yer almıyorsa açılır kutu varsayılan seçim göstermeyecek ve sorunlara neden olabilecektir.

Uygulamanızdan ham veri toplama hakkında daha fazla bilgi için Akıllı Etiketler sayfamıza göz atın!