وسوم Meta

داخل وسم <head>، توفر وسوم <meta> معلومات حول العنوان والناشر، وتمكّننا من تلقي مدخلات المستخدم. هناك ستة عناصر تحكم قابلة للتخصيص من قِبل المستخدم: منزلقات الأرقام، ومنزلقات درجة اللون، ومفاتيح التبديل المنطقية، ومنتقيات الألوان، وحقول النص، والقوائم المنسدلة. يتطلب كل عنصر تحكم أربع سمات أساسية، بالإضافة إلى سمات خاصة بعنصر التحكم نفسه.

	السمة الأساسية	الوصف
	property	تحدد اسم المتغير الذي سيُستخدم في شيفرتك
	label	التسمية النصية التي تظهر للمستخدمين في واجهة عنصر التحكم
	type	تحدد نوع البيانات: number أو hue أو boolean أو color
	default	تعيّن القيمة الأولية التي يستخدمها عنصر التحكم
	tooltip*	(*اختيارية) تعرض وصفًا قصيرًا عندما يمرر المستخدم المؤشر فوق عنصر التحكم

منزلق الأرقام

يتيح منزلق الأرقام للمستخدم اختيار عدد صحيح ضمن نطاق محدد. ويُستخدم عادةً لضبط معاملات مثل سرعة تشغيل الرسم المتحرك، أو عدد الأشكال التي تظهر على الشاشة، أو عدد مرات تشغيل التأثير.

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

يبدو هكذا عمليًا:

يحتاج منزلق الأرقام إلى سمتين إضافيتين ليعمل بشكل صحيح:

السمة	الوصف
min	تعيّن أدنى قيمة يمكن للمستخدم اختيارها.
max	تعيّن أعلى قيمة يمكن للمستخدم اختيارها.

منزلق درجة اللون

يتيح منزلق درجة اللون للمستخدم اختيار درجة لون باستخدام نموذج الألوان HSL (درجة اللون، التشبع، الإضاءة). ويُستخدم عادةً لإجراء تعديلات أساسية على الألوان أو لاختيار لون أساسي للتأثيرات والعناصر.

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

من الناحية المرئية، يبدو هكذا:

ليعمل منزلق درجة اللون بشكل صحيح، فإنه يتطلب سمتين إضافيتين:

السمة	الوصف
min	تحدد أدنى قيمة لدرجة اللون يمكن للمستخدم اختيارها. أدنى قيمة ممكنة هي 0
max	تحدد أعلى قيمة متاحة لدرجة اللون. أعلى قيمة ممكنة هي 360

القيمة المنطقية

يتيح مفتاح التبديل المنطقي (boolean) للمستخدم التبديل بين حالتين: “تشغيل” و”إيقاف”. وتقتصر قيمه على 0 (إيقاف) أو 1 (تشغيل). وعلى عكس عناصر التحكم الأخرى، تعتمد القيم المنطقية فقط على السمات الافتراضية ولا تتطلب أي تهيئة إضافية.

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

تُستخدم عادةً لتفعيل ميزات محددة أو تعطيلها، أو للتبديل بين الأوضاع (مثل الوضع العمودي والأفقي)، أو للتحكم في خيارات الظهور والسلوك في الواجهة، أو لتشغيل إعادة عرض التأثيرات.

إليك مثالًا على كيفية ظهوره:

منتقي الألوان

يتيح منتقي الألوان للمستخدم اختيار لون عن طريق ضبط مكونات درجة اللون والتشبع والإضاءة ضمن نموذج الألوان HSL القياسي. وهو الأداة الأكثر شيوعًا والمعيارية لاختيار الألوان، سواء للخلفيات أو للعناصر المعروضة على الشاشة.

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

من الناحية المرئية، يبدو هكذا:

يجب تحديد القيمة الافتراضية لمنتقي الألوان بالتنسيق الست عشري (hexadecimal). بالإضافة إلى ذلك، يتطلب سمتين إضافيتين:

السمة	الوصف
min	أدنى قيمة قابلة للاختيار، وأدنى قيمة ممكنة هي 0.
max	أعلى قيمة قابلة للاختيار، وأعلى قيمة ممكنة هي 360.

حقل النص

يتيح حقل النص، أو مربع إدخال النص، للمستخدم إدخال سلسلة من الأحرف. ويتحدّث الإدخال في كل مرة يُضاف فيها حرف إلى الحقل أو يُحذف منه.

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

هكذا يبدو:

السمة	الوصف
default	يمكن ألا تحتوي على أي أحرف

القائمة

تتيح القائمة للمستخدم اختيار خيار واحد من قائمة قيم محددة مسبقًا. على سبيل المثال، يمكن للمستخدم التبديل بين خيارات مختلفة للشخصيات أو التأثيرات لاختيار الخيار المفضل لديه.

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

يبدو هكذا عمليًا:

تحدد السمة values جميع الخيارات المتاحة، بينما تحدد السمة default الخيار المحدد في البداية.

السمة	الوصف
values	قائمة مفصولة بفواصل من خيارات السلاسل النصية الممكنة
default	تعيّن الخيار المحدد افتراضيًا. إذا لم تكن هذه القيمة مضمّنة في قائمة values، فلن تعرض القائمة المنسدلة أي تحديد افتراضي وقد يسبب ذلك مشكلات.

لمزيد من المعلومات حول جمع البيانات الخام من تطبيقك، راجع صفحة الوسوم الذكية لدينا!