Список компонентов

Компоненты — это JSON-объекты, которые вы можете использовать при создании интерфейса в конструкторе шаблонов. Например, чтобы добавить картинку, кнопку или действие.

Имя компонента указывается в свойстве type в формате <категория>.<имя>. У каждого компонента свой набор допустимых свойств, подробно описанный на странице этого компонента.

Категории:

  • data — компоненты для работы с данными: входными, выходными или промежуточными.

  • layout — варианты расстановки элементов в интерфейсе, например колонки или side-by-side. Если у вас больше одного элемента в интерфейсе, эти компоненты помогут расставить их в правильном порядке.

  • view — отображаемые элементы интерфейса, например текст, список, аудио-плеер или картинка.

  • field — поля для ввода данных, например текстовое поле или выпадающий список.

  • condition — позволяют проверять, соответствует ли выражение какому-то условию. Например, чтобы проверить, что поле с текстом заполнено.

  • helper — позволяют выполнять различные операции, например реализовать условия if-then-else или конструкцию switch-case.

  • plugin — плагины, предоставляющие дополнительную функциональность. Например, plugin.hotkeys позволяет настроить горячие клавиши.

  • action — позволяют выполнять различные действия, например показывать уведомления.

Примечание: не все компоненты можно использовать отовсюду, например плагины можно использовать только в корневом элементе plugins. Допустимые компоненты вы можете увидеть в подсказках в редакторе при нажатии клавиши Tab.

Варианты расстановки элементов (layouts)

ComponentDescription
layout.barsКомпонент, добавляющий к контенту верхнюю и нижнюю панели.
layout.columnsКомпонент для расстановки контента по столбцам.
layout.compareПозволяет расставить элементы интерфейса так, чтобы сравнивать их между собой. Например, можно сравнить несколько фото.
layout.side-by-sideКомпонент отображает на одной горизонтальной панели несколько блоков информации одинаковой ширины.
layout.sidebarПозволяет разместить на странице блок с основным содержимым и примыкающую к нему панель с элементами управления.
ComponentDescription
layout.barsКомпонент, добавляющий к контенту верхнюю и нижнюю панели.
layout.columnsКомпонент для расстановки контента по столбцам.
layout.compareПозволяет расставить элементы интерфейса так, чтобы сравнивать их между собой. Например, можно сравнить несколько фото.
layout.side-by-sideКомпонент отображает на одной горизонтальной панели несколько блоков информации одинаковой ширины.
layout.sidebarПозволяет разместить на странице блок с основным содержимым и примыкающую к нему панель с элементами управления.

Отображаемые элементы (views)

ComponentDescription
view.action-buttonКнопка, вызывающая действие.
view.alertКомпонент создает цветной блок для выделения важной информации.
view.audioКомпонент воспроизводит аудио.
view.collapseРазворачивающийся блок.
view.device-frameОборачивает содержимое компонента в рамку, похожую на мобильный телефон. Внутри рамки можно расположить другие компоненты.
view.dividerГоризонтальный разделитель.
view.groupОбъединяет любые компоненты в визуальные группы — блоки с рамкой.
view.iframeОтображает веб-страницу по URL-адресу во встроенном окне.
view.imageОтображает картинку.
view.labeled-listОтображение компонентов в виде списка с подписями. Подписи располагаются слева.
view.linkУниверсальный способ добавить ссылку.
view.link-groupОбъединяет ссылки в группы.
view.listБлок для отображения данных списком.
view.mapДобавляет карту к заданию.
view.markdownБлок для отображения текста в разметке Markdown.
view.textБлок для отображения текста.
view.videoПлеер для воспроизведения видео.
ComponentDescription
view.action-buttonКнопка, вызывающая действие.
view.alertКомпонент создает цветной блок для выделения важной информации.
view.audioКомпонент воспроизводит аудио.
view.collapseРазворачивающийся блок.
view.device-frameОборачивает содержимое компонента в рамку, похожую на мобильный телефон. Внутри рамки можно расположить другие компоненты.
view.dividerГоризонтальный разделитель.
view.groupОбъединяет любые компоненты в визуальные группы — блоки с рамкой.
view.iframeОтображает веб-страницу по URL-адресу во встроенном окне.
view.imageОтображает картинку.
view.labeled-listОтображение компонентов в виде списка с подписями. Подписи располагаются слева.
view.linkУниверсальный способ добавить ссылку.
view.link-groupОбъединяет ссылки в группы.
view.listБлок для отображения данных списком.
view.mapДобавляет карту к заданию.
view.markdownБлок для отображения текста в разметке Markdown.
view.textБлок для отображения текста.
view.videoПлеер для воспроизведения видео.

Элементы для ввода данных (fields)

ComponentDescription
field.audioКомпонент для записи аудио. Работает в приложении Яндекс.Толока для мобильных. В браузере открывает окно для загрузки аудиофайла.
field.button-radioДобавляет одну кнопку. Пригодится для оформления необязательного варианта ответа.
field.button-radio-groupДобавляет кнопки для выбора варианта ответа. Пригодится, если у вас несколько вариантов. Можно добавить только одну кнопку, но это легче сделать с field.button-radio.
field.checkboxПереключатель в виде галочки.
field.checkbox-groupДобавляет группу переключателей с галочками для выбора независимых вариантов ответа. Пригодится, если у вас несколько вариантов. Можно добавить только один переключатель, но это легче сделать с field.checkbox.
field.dateКомпонент, позволяющий ввести дату и время в требуемом формате и заданном диапазоне.
field.emailСоздает поле для ввода адреса электронной почты.
field.fileКомпонент позволяет пользователю загружать файлы. В интерфейсе отображается кнопкой загрузки.
field.image-annotationКомпонент для разметки изображений.
field.listКомпонент, позволяющий пользователю самостоятельно добавлять и удалять элементы списка, например текстовые поля для заполнения. Так вы сможете разрешить пользователю дать несколько ответов на вопрос.
field.media-fileДобавляет кнопки для разных видов загрузки файлов: загрузить фото или видео, выбрать файлы из файлового менеджера или галереи.
field.numberКомпонент, позволяющий ввести число.
field.phone-numberСоздает поле для ввода номера телефона.
field.radio-groupКомпонент, позволяющий выбрать одно из нескольких значений. Оформляется в виде группы переключателей (кружочков), располагающихся вертикально.
field.selectКнопка для выбора из выпадающего списка. Используйте, когда список длинный, а выбрать нужно один вариант.
field.textПоле для ввода короткого текста, не больше одной строки. Чтобы добавить поле, где можно ввести много строк текста, используйте field.textarea.
field.text-annotationКомпонент для сегментации текста.
field.textareaПоле для ввода многострочного текста.
ComponentDescription
field.audioКомпонент для записи аудио. Работает в приложении Яндекс.Толока для мобильных. В браузере открывает окно для загрузки аудиофайла.
field.button-radioДобавляет одну кнопку. Пригодится для оформления необязательного варианта ответа.
field.button-radio-groupДобавляет кнопки для выбора варианта ответа. Пригодится, если у вас несколько вариантов. Можно добавить только одну кнопку, но это легче сделать с field.button-radio.
field.checkboxПереключатель в виде галочки.
field.checkbox-groupДобавляет группу переключателей с галочками для выбора независимых вариантов ответа. Пригодится, если у вас несколько вариантов. Можно добавить только один переключатель, но это легче сделать с field.checkbox.
field.dateКомпонент, позволяющий ввести дату и время в требуемом формате и заданном диапазоне.
field.emailСоздает поле для ввода адреса электронной почты.
field.fileКомпонент позволяет пользователю загружать файлы. В интерфейсе отображается кнопкой загрузки.
field.image-annotationКомпонент для разметки изображений.
field.listКомпонент, позволяющий пользователю самостоятельно добавлять и удалять элементы списка, например текстовые поля для заполнения. Так вы сможете разрешить пользователю дать несколько ответов на вопрос.
field.media-fileДобавляет кнопки для разных видов загрузки файлов: загрузить фото или видео, выбрать файлы из файлового менеджера или галереи.
field.numberКомпонент, позволяющий ввести число.
field.phone-numberСоздает поле для ввода номера телефона.
field.radio-groupКомпонент, позволяющий выбрать одно из нескольких значений. Оформляется в виде группы переключателей (кружочков), располагающихся вертикально.
field.selectКнопка для выбора из выпадающего списка. Используйте, когда список длинный, а выбрать нужно один вариант.
field.textПоле для ввода короткого текста, не больше одной строки. Чтобы добавить поле, где можно ввести много строк текста, используйте field.textarea.
field.text-annotationКомпонент для сегментации текста.
field.textareaПоле для ввода многострочного текста.

Хелперы (helpers)

ComponentDescription
helper.concat-arraysОбъединение нескольких массивов в один.
helper.entries2objectСоздание объекта из заданного массива пар ключей и значений.
helper.ifОператор If...Then...Else. Позволяет выполнить либо один блок кода, либо другой, в зависимости от условия.
helper.joinКомпонент соединяет несколько строк в одну. Между строками можно добавить разделитель, например пробел или запятую.
helper.object2entriesСоздание массива пар вида ключ-значение из заданного объекта.
helper.replaceПозволяет заменить одни части строки на другие.
helper.search-queryКомпонент создания строки со ссылкой поискового запроса.
helper.switchКонструкция switch-case: последовательно проверяет условия и выполняет код, когда условие оказывается истинно.
helper.text-transformПозволяет изменять регистр текста, например сделать все буквы заглавными.
helper.transformСоздает новый массив, преобразуя каждый из элементов исходного массива.
helper.translateКомпонент для перевода элементов интерфейса на другие языки. Подробнее в разделе Перевод интерфейса задания.
helper.proxyКомпонент позволяет загружать файлы с Яндекс.Диска.
ComponentDescription
helper.concat-arraysОбъединение нескольких массивов в один.
helper.entries2objectСоздание объекта из заданного массива пар ключей и значений.
helper.ifОператор If...Then...Else. Позволяет выполнить либо один блок кода, либо другой, в зависимости от условия.
helper.joinКомпонент соединяет несколько строк в одну. Между строками можно добавить разделитель, например пробел или запятую.
helper.object2entriesСоздание массива пар вида ключ-значение из заданного объекта.
helper.replaceПозволяет заменить одни части строки на другие.
helper.search-queryКомпонент создания строки со ссылкой поискового запроса.
helper.switchКонструкция switch-case: последовательно проверяет условия и выполняет код, когда условие оказывается истинно.
helper.text-transformПозволяет изменять регистр текста, например сделать все буквы заглавными.
helper.transformСоздает новый массив, преобразуя каждый из элементов исходного массива.
helper.translateКомпонент для перевода элементов интерфейса на другие языки. Подробнее в разделе Перевод интерфейса задания.
helper.proxyКомпонент позволяет загружать файлы с Яндекс.Диска.

Условия (conditions)

ComponentDescription
condition.allПроверяет, что все дочерние условия выполняются. Если хотя бы одно условие не выполнено, компонент возвращает false.
condition.anyПроверяет, что хотя бы одно из дочерних условий выполняется. Если ни одно условие не выполнено, компонент возвращает false.
condition.emptyПроверяет, что данные не получили значение. Если получили — возвращает false. Пригодится, если вам нужно проверить опциональные данные шаблона (data.*) или убедиться, что пользователь не взаимодействовал с полями ввода данных (fields.*).
condition.equalsПроверяет, равно ли исходное значение указанному.
condition.link-openedПроверяет, что пользователь перешел по ссылке.
condition.notВозвращает значение, обратное заданному условию.
condition.playedПроверяет, начато ли воспроизведение.
condition.played-fullyПроверяет, что воспроизведение завершено.
condition.requiredПроверяет, что данные заполнены.
condition.same-domainПроверяет, что введенная ссылка принадлежит определенному сайту. При совпадении вернет true, иначе — false.
condition.schemaПозволяет валидировать данные с помощью JSON Schema. Это специальный формат, чтобы описывать данные в формате JSON.
condition.sub-arrayПроверяет, что массив является подмассивом другого элемента.
condition.distanceКомпонент проверяет, соответствуют ли переданные координаты заданным.
ComponentDescription
condition.allПроверяет, что все дочерние условия выполняются. Если хотя бы одно условие не выполнено, компонент возвращает false.
condition.anyПроверяет, что хотя бы одно из дочерних условий выполняется. Если ни одно условие не выполнено, компонент возвращает false.
condition.emptyПроверяет, что данные не получили значение. Если получили — возвращает false. Пригодится, если вам нужно проверить опциональные данные шаблона (data.*) или убедиться, что пользователь не взаимодействовал с полями ввода данных (fields.*).
condition.equalsПроверяет, равно ли исходное значение указанному.
condition.link-openedПроверяет, что пользователь перешел по ссылке.
condition.notВозвращает значение, обратное заданному условию.
condition.playedПроверяет, начато ли воспроизведение.
condition.played-fullyПроверяет, что воспроизведение завершено.
condition.requiredПроверяет, что данные заполнены.
condition.same-domainПроверяет, что введенная ссылка принадлежит определенному сайту. При совпадении вернет true, иначе — false.
condition.schemaПозволяет валидировать данные с помощью JSON Schema. Это специальный формат, чтобы описывать данные в формате JSON.
condition.sub-arrayПроверяет, что массив является подмассивом другого элемента.
condition.distanceКомпонент проверяет, соответствуют ли переданные координаты заданным.

Плагины (plugins)

ComponentDescription
plugin.field.image-annotation.hotkeysПозволяет задавать горячие клавиши для компонента field.image-annotation.
plugin.field.text-annotation.hotkeysПозволяет задавать горячие клавиши для компонента field.text-annotation.
plugin.hotkeysПозволяет задавать горячие клавиши для выполнения действий.
plugin.tolokaПлагин с дополнительными настройками заданий в Толоке.
plugin.triggerПозволяет создавать триггеры: вызывать определенное действие при наступлении какого-то события.
ComponentDescription
plugin.field.image-annotation.hotkeysПозволяет задавать горячие клавиши для компонента field.image-annotation.
plugin.field.text-annotation.hotkeysПозволяет задавать горячие клавиши для компонента field.text-annotation.
plugin.hotkeysПозволяет задавать горячие клавиши для выполнения действий.
plugin.tolokaПлагин с дополнительными настройками заданий в Толоке.
plugin.triggerПозволяет создавать триггеры: вызывать определенное действие при наступлении какого-то события.

Действия (actions)

ComponentDescription
action.bulkПозволяет одновременно вызывать несколько действий (actions).
action.notifyКомпонент создает сообщение в левом нижнем углу экрана.
action.open-closeМеняет режим отображения у другого компонента — открывает или закрывает его.
action.open-linkОткрывает в браузере новую вкладку с заданной интернет-страницей.
action.play-pauseКомпонент управляет воспроизведением аудио или видео. Он останавливает воспроизведение, если оно запущено, и запускает, если остановлено.
action.rotateПоворачивает указанный компонент на 90 градусов.
action.setУстанавливает значение из payload в данные в свойстве data.
action.toggleКомпонент меняет значение в данных с true на false и наоборот.
ComponentDescription
action.bulkПозволяет одновременно вызывать несколько действий (actions).
action.notifyКомпонент создает сообщение в левом нижнем углу экрана.
action.open-closeМеняет режим отображения у другого компонента — открывает или закрывает его.
action.open-linkОткрывает в браузере новую вкладку с заданной интернет-страницей.
action.play-pauseКомпонент управляет воспроизведением аудио или видео. Он останавливает воспроизведение, если оно запущено, и запускает, если остановлено.
action.rotateПоворачивает указанный компонент на 90 градусов.
action.setУстанавливает значение из payload в данные в свойстве data.
action.toggleКомпонент меняет значение в данных с true на false и наоборот.

Источники данных

ComponentDescription
data.locationКомпонент передает координаты устройства пользователя.
ComponentDescription
data.locationКомпонент передает координаты устройства пользователя.