Мета-теги

Внутри тега <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

Булев переключатель

Булев переключатель позволяет пользователю переключаться между двумя состояниями: «включено» и «выключено». Значения ограничены 0 (выключено) или 1 (включено). В отличие от других элементов управления, булевы переключатели используют только атрибуты default и не требуют дополнительной настройки.

<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"/>

Визуально выглядит так:

Значение по умолчанию для выборщика цвета должно быть указано в шестнадцатеричном формате. Кроме того, требуются два дополнительных атрибута:

Атрибут	Описание
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, комбинированный список не покажет выбор по умолчанию, что может вызвать проблемы.

Для получения дополнительной информации о получении необработанных данных из приложения ознакомьтесь со страницей Умные теги!