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

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

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

Категории:

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

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

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

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

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

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

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

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

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

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

  • layout.bars. Компонент, добавляющий к контенту верхнюю и нижнюю панели.

  • layout.columns. Компонент для расстановки контента по столбцам.

  • layout.side-by-side. Компонент отображает на одной горизонтальной панели несколько блоков информации одинаковой ширины.

  • layout.sidebar. Позволяет разместить на странице блок с основным содержимым и примыкающую к нему панель с элементами управления.

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

  • 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.list. Блок для отображения данных списком.

  • view.markdown. Блок для отображения текста в разметке Markdown.

  • view.text. Блок для отображения текста.

  • view.video. Плеер для воспроизведения видео.

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

  • field.button-radio. Компонент в виде кнопки.

  • field.button-radio-group. Компонент в виде кнопок, позволяющий пользователю сделать выбор между заданными значениями.

  • field.checkbox. Переключатель в виде галочки.

  • field.checkbox-group. Группа переключателей для выбора одного или нескольких вариантов ответа.

  • field.date. Компонент, позволяющий ввести дату и время в требуемом формате и заданном диапазоне.

  • field.list. Компонент, позволяющий пользователю самостоятельно добавлять и удалять элементы списка, например текстовые поля для заполнения.

  • field.number. Компонент, позволяющий ввести число.

  • field.radio-group. Компонент, позволяющий выбрать одно из нескольких значений. Оформляется в виде группы переключателей (кружочков), располагающихся вертикально.

  • field.select. Кнопка для выбора из выпадающего списка. Используйте, когда список длинный, а выбрать нужно один вариант.

  • field.text. Компонент, позволяющий ввести однострочный текст.

  • field.textarea. Поле для ввода многострочного текста.

Хелперы (helpers)

  • 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. Создает новый массив, преобразуя каждый из элементов исходного массива.

Условия (conditions)

  • condition.all. Проверяет, что все дочерние условия выполняются. Если хотя бы одно условие не выполнено, компонент возвращает false.

  • condition.any. Проверяет, что хотя бы одно из дочерних условий выполняется. Если ни одно условие не выполнено, компонент возвращает false.

  • condition.empty. Проверяет, что в данных пусто (undefined). Возвращает false, если данные получили значение.

  • condition.equals. Проверяет, равно ли исходное значение указанному.

  • condition.link-opened. Проверяет, что пользователь перешел по ссылке.

  • condition.not. Возвращает значение, обратное заданному условию.

  • condition.played. Проверяет, начато ли воспроизведение.

  • condition.played-fully. Проверяет, что воспроизведение завершено.

  • condition.required. Проверяет, что данные заполнены.

  • condition.schema. Позволяет валидировать данные с помощью JSON Schema. Это специальный формат, чтобы описывать данные в формате JSON.

  • condition.sub-array. Проверяет, что массив является подмассивом другого элемента.

Плагины (plugins)

  • plugin.hotkeys. Позволяет задавать горячие клавиши для выполнения действий.

  • plugin.toloka. Плагин с дополнительными настройками заданий в Толоке.

  • plugin.trigger. Позволяет создавать триггеры: вызывать определенное действие при наступлении какого-то события.

Действия (actions)

  • 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 и наоборот.