--- metadata: - name: generator content: Diplodoc Platform v5.55.0 alternate: - https://yandex.ru/support/tasks-requester/ru/template-builder/reference/index.md - href: ru/template-builder/reference/index.md type: text/markdown title: Markdown version - href: ../../llms.txt type: text/markdown title: llms.txt --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/tasks-requester/ru/llms.txt # Список компонентов Компоненты — это JSON-объекты, которые вы можете использовать при создании интерфейса в конструкторе шаблонов. Например, чтобы добавить картинку, кнопку или действие. Имя компонента указывается в свойстве `type` в формате `<категория>.<имя>`. У каждого компонента свой набор допустимых свойств, подробно описанный на странице этого компонента. Категории: - [data](https://yandex.ru/support/tasks-requester/ru/template-builder/operations/work-with-data.md) — компоненты для работы с данными: входными, выходными или промежуточными. - [layout](#layouts) — варианты расстановки элементов в интерфейсе, например колонки или side-by-side. Если у вас больше одного элемента в интерфейсе, эти компоненты помогут расставить их в правильном порядке. - [view](#views) — отображаемые элементы интерфейса, например текст, список, аудио-плеер или картинка. - [field](#fields) — поля для ввода данных, например текстовое поле или выпадающий список. - [condition](#conditions) — позволяют проверять, соответствует ли выражение какому-то условию. Например, чтобы проверить, что поле с текстом заполнено. - [helper](#helpers) — позволяют выполнять различные операции, например реализовать условия if-then-else или конструкцию switch-case. - [plugin](#plugins) — плагины, предоставляющие дополнительную функциональность. Например, `plugin.hotkeys` позволяет настроить горячие клавиши. - [action](#actions) — позволяют выполнять различные действия, например показывать уведомления. **Примечание:** не все компоненты можно использовать отовсюду, например плагины можно использовать только в корневом элементе `plugins`. Допустимые компоненты вы можете увидеть в подсказках в редакторе при нажатии клавиши **Tab**. ## Варианты расстановки элементов (layouts) {#layouts} | Component | Description | | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | [layout.bars](layout.bars.md) | Компонент, добавляющий к элементам верхнюю и нижнюю панели. | | [layout.columns](layout.columns.md) | Компонент для расстановки элементов по столбцам. | | [layout.compare](layout.compare.md) | Позволяет расставить элементы интерфейса так, чтобы сравнивать их между собой. Например, можно сравнить несколько фото. | | [layout.side-by-side](layout.side-by-side.md) | Компонент отображает на одной горизонтальной панели несколько блоков информации одинаковой ширины. | | [layout.sidebar](layout.sidebar.md) | Позволяет разместить на странице блок с основным содержимым и примыкающую к нему панель с элементами управления. | ## Отображаемые элементы (views) {#views} | Component | Description | | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | [view.action-button](view.action-button.md) | Кнопка, вызывающая действие. | | [view.alert](view.alert.md) | Компонент создает цветной блок для выделения важной информации. | | [view.audio](view.audio.md) | Компонент воспроизводит аудио. | | [view.collapse](view.collapse.md) | Разворачивающийся блок. | | [view.device-frame](view.device-frame.md) | Оборачивает содержимое компонента в рамку, похожую на мобильный телефон. Внутри рамки можно расположить другие компоненты. | | [view.divider](view.divider.md) | Горизонтальный разделитель. | | [view.group](view.group.md) | Объединяет любые компоненты в визуальные группы — блоки с рамкой. | | [view.iframe](view.iframe.md) | Отображает веб-страницу по URL-адресу во встроенном окне. | | [view.image](view.image.md) | Отображает картинку. | | [view.labeled-list](view.labeled-list.md) | Отображение компонентов в виде списка с подписями. Подписи располагаются слева. | | [view.link](view.link.md) | Универсальный способ добавить ссылку. | | [view.link-group](view.link-group.md) | Объединяет ссылки в группы. | | [view.list](view.list.md) | Блок для отображения данных списком. | | [view.map](view.map.md) | Добавляет карту к заданию. | | [view.markdown](view.markdown.md) | Блок для отображения текста в разметке Markdown. | | [view.text](view.text.md) | Блок для отображения текста. | | [view.video](view.video.md) | Плеер для воспроизведения видео. | ## Элементы для ввода данных (fields) {#fields} | Component | Description | | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [field.audio](field.audio.md) | Компонент для записи аудио. Работает в приложении [Яндекс Задания для мобильных](https://yandex.ru/support2/tasks/ru/android/). В браузере открывает окно для загрузки аудиофайла. | | [field.button-radio](field.button-radio.md) | Добавляет одну кнопку. Пригодится для оформления необязательного варианта ответа. | | [field.button-radio-group](field.button-radio-group.md) | Добавляет кнопки для выбора варианта ответа. Пригодится, если у вас несколько вариантов. Можно добавить только одну кнопку, но это легче сделать с [field.button-radio](field.button-radio.md). | | [field.checkbox](field.checkbox.md) | Переключатель в виде галочки. | | [field.checkbox-group](field.checkbox-group.md) | Добавляет группу переключателей с галочками для выбора независимых вариантов ответа. Пригодится, если у вас несколько вариантов. Можно добавить только один переключатель, но это легче сделать с [field.checkbox](field.checkbox.md). | | [field.date](field.date.md) | Компонент, позволяющий ввести дату и время в требуемом формате и заданном диапазоне. | | [field.email](field.email.md) | Создает поле для ввода адреса электронной почты. | | [field.file](field.file.md) | Компонент позволяет исполнителю загружать файлы. В интерфейсе отображается кнопкой загрузки. | | [field.image-annotation](field.image-annotation.md) | Компонент для разметки изображений. | | [field.list](field.list.md) | Компонент, позволяющий исполнителю самостоятельно добавлять и удалять элементы списка, например текстовые поля для заполнения. Так вы сможете разрешить исполнителю дать несколько ответов на вопрос. | | [field.map](field.map.md) | Добавляет карту к заданию и позволяет исполнителям делать на ней отметки. | | [field.media-file](field.media-file.md) | Добавляет кнопки для разных видов загрузки файлов: загрузить фото или видео, выбрать файлы из файлового менеджера или галереи. | | [field.number](field.number.md) | Компонент, позволяющий ввести число. | | [field.phone-number](field.phone-number.md) | Создает поле для ввода номера телефона. | | [field.quiz](field.quiz.md) | Компонент викторины, который учитывает только значения, на которые были даны первые ответы. | | [field.radio-group](field.radio-group.md) | Компонент, позволяющий выбрать одно из нескольких значений. Оформляется в виде группы переключателей (кружочков), располагающихся вертикально. | | [field.select](field.select.md) | Кнопка для выбора из выпадающего списка. Используйте, когда список длинный, а выбрать нужно один вариант. | | [field.text](field.text.md) | Поле для ввода короткого текста, не больше одной строки. Чтобы добавить поле, где можно ввести много строк текста, используйте [field.textarea](field.textarea.md). | | [field.text-annotation](field.text-annotation.md) | Компонент для сегментации текста. | | [field.textarea](field.textarea.md) | Поле для ввода многострочного текста. | ## Хелперы (helpers) {#helpers} | Component | Description | | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [helper.concat-arrays](helper.concat-arrays.md) | Объединение нескольких массивов в один. | | [helper.entries2object](helper.entries2object.md) | Создание объекта из заданного массива пар ключей и значений. | | [helper.if](helper.if.md) | Оператор If...Then...Else. Позволяет выполнить либо один блок кода, либо другой, в зависимости от условия. | | [helper.join](helper.join.md) | Компонент соединяет несколько строк в одну. Между строками можно добавить разделитель, например пробел или запятую. | | [helper.object2entries](helper.object2entries.md) | Создание массива пар вида ключ-значение из заданного объекта. | | [helper.replace](helper.replace.md) | Позволяет заменить одни части строки на другие. | | [helper.search-query](helper.search-query.md) | Компонент создания строки со ссылкой поискового запроса. | | [helper.switch](helper.switch.md) | Конструкция switch-case: последовательно проверяет условия и выполняет код, когда условие оказывается истинно. | | [helper.text-transform](helper.text-transform.md) | Позволяет изменять регистр текста, например сделать все буквы заглавными. | | [helper.transform](helper.transform.md) | Создает новый массив, преобразуя каждый из элементов исходного массива. | | [helper.translate](helper.translate.md) | Компонент для перевода элементов интерфейса на другие языки. Подробнее в разделе [Перевод интерфейса задания](../../guide/project-languages#interface-translate). | | [helper.proxy](helper.proxy.md) | Компонент позволяет загружать файлы с Яндекс Диска. | ## Условия (conditions) {#conditions} | Component | Description | | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [condition.all](condition.all.md) | Проверяет, что **все** дочерние условия выполняются. Если хотя бы одно условие не выполнено, компонент возвращает `false`. | | [condition.any](condition.any.md) | Проверяет, что **хотя бы одно** из дочерних условий выполняется. Если ни одно условие не выполнено, компонент возвращает `false`. | | [condition.empty](condition.empty.md) | Проверяет, что данные не получили значение. Если получили — возвращает `false`. Пригодится, если вам нужно проверить опциональные данные шаблона (`data.*`) или убедиться, что исполнитель не взаимодействовал с полями ввода данных (`fields.*`). | | [condition.equals](condition.equals.md) | Проверяет, равно ли исходное значение указанному. | | [condition.link-opened](condition.link-opened.md) | Проверяет, что исполнитель перешел по ссылке. | | [condition.not](condition.not.md) | Возвращает значение, обратное заданному условию. | | [condition.played](condition.played.md) | Проверяет, начато ли воспроизведение. | | [condition.played-fully](condition.played-fully.md) | Проверяет, что воспроизведение завершено. | | [condition.required](condition.required.md) | Проверяет, что данные заполнены. | | [condition.same-domain](condition.same-domain.md) | Проверяет, что введенная ссылка принадлежит определенному сайту. При совпадении вернет `true`, иначе — `false`. | | [condition.schema](condition.schema.md) | Позволяет валидировать данные с помощью [JSON Schema](https://json-schema.org/learn/getting-started-step-by-step.html). Это специальный формат, чтобы описывать данные в формате JSON. | | [condition.sub-array](condition.sub-array.md) | Проверяет, что массив является подмассивом другого элемента. | | [condition.distance](condition.distance.md) | Компонент проверяет, соответствуют ли переданные координаты заданным. | ## Плагины (plugins) {#plugins} | Component | Description | | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | [plugin.field.image-annotation.hotkeys](plugin.field.image-annotation.hotkeys.md) | Позволяет задавать горячие клавиши для компонента [field.image-annotation](field.image-annotation.md). | | [plugin.field.text-annotation.hotkeys](plugin.field.text-annotation.hotkeys.md) | Позволяет задавать горячие клавиши для компонента [field.text-annotation](field.text-annotation.md). | | [plugin.hotkeys](plugin.hotkeys.md) | Позволяет задавать горячие клавиши для выполнения действий. | | [plugin.toloka](plugin.toloka.md) | Плагин с дополнительными настройками заданий в Яндекс Заданиях. | | [plugin.trigger](plugin.trigger.md) | Позволяет создавать триггеры: вызывать определенное действие при наступлении какого-то события. | ## Действия (actions) {#actions} | Component | Description | | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | [action.bulk](action.bulk.md) | Позволяет одновременно вызывать несколько действий (actions). | | [action.notify](action.notify.md) | Компонент создает сообщение в левом нижнем углу экрана. | | [action.open-close](action.open-close.md) | Меняет режим отображения у другого компонента — открывает или закрывает его. | | [action.open-link](action.open-link.md) | Открывает в браузере новую вкладку с заданной интернет-страницей. | | [action.play-pause](action.play-pause.md) | Компонент управляет воспроизведением аудио или видео. Он останавливает воспроизведение, если оно запущено, и запускает, если остановлено. | | [action.rotate](action.rotate.md) | Поворачивает указанный компонент на 90 градусов. | | [action.set](action.set.md) | Устанавливает значение из `payload` в данные в свойстве `data`. | | [action.toggle](action.toggle.md) | Компонент меняет значение в данных с `true` на `false` и наоборот. | ## Источники данных {#datas} | Component | Description | | --------------------------------- | ----------------------------------------------------- | | [data.location](data.location.md) | Компонент передает координаты устройства исполнителя. |