Компоненты — это JSON-объекты, которые вы можете использовать при создании интерфейса в конструкторе шаблонов. Например, чтобы добавить картинку, кнопку или действие.
Имя компонента указывается в свойстве type в формате <категория>.<имя>. У каждого компонента свой набор допустимых свойств, подробно описанный на странице этого компонента.
Категории:
- data — компоненты для работы с данными: входными, выходными или промежуточными.
- layout — варианты расстановки элементов в интерфейсе, например колонки или side-by-side. Если у вас больше одного элемента в интерфейсе, эти компоненты помогут расставить их в правильном порядке.
- view — отображаемые элементы интерфейса, например текст, список, аудио-плеер или картинка.
- field — поля для ввода данных, например текстовое поле или выпадающий список.
- condition — позволяют проверять, соответствует ли выражение какому-то условию. Например, чтобы проверить, что поле с текстом заполнено.
- helper — позволяют выполнять различные операции, например реализовать условия if-then-else или конструкцию switch-case.
- plugin — плагины, предоставляющие дополнительную функциональность. Например,
plugin.hotkeys позволяет настроить горячие клавиши.
- action — позволяют выполнять различные действия, например показывать уведомления.
Примечание: не все компоненты можно использовать отовсюду, например плагины можно использовать только в корневом элементе plugins. Допустимые компоненты вы можете увидеть в подсказках в редакторе при нажатии клавиши Tab.
Варианты расстановки элементов (layouts)
| Component |
Description |
| layout.bars |
Компонент, добавляющий к элементам верхнюю и нижнюю панели. |
| layout.columns |
Компонент для расстановки элементов по столбцам. |
| layout.compare |
Позволяет расставить элементы интерфейса так, чтобы сравнивать их между собой. Например, можно сравнить несколько фото. |
| layout.side-by-side |
Компонент отображает на одной горизонтальной панели несколько блоков информации одинаковой ширины. |
| layout.sidebar |
Позволяет разместить на странице блок с основным содержимым и примыкающую к нему панель с элементами управления. |
Отображаемые элементы (views)
Элементы для ввода данных (fields)
| Component |
Description |
| 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.map |
Добавляет карту к заданию и позволяет исполнителям делать на ней отметки. |
| field.media-file |
Добавляет кнопки для разных видов загрузки файлов: загрузить фото или видео, выбрать файлы из файлового менеджера или галереи. |
| field.number |
Компонент, позволяющий ввести число. |
| field.phone-number |
Создает поле для ввода номера телефона. |
| field.quiz |
Компонент викторины, который учитывает только значения, на которые были даны первые ответы. |
| field.radio-group |
Компонент, позволяющий выбрать одно из нескольких значений. Оформляется в виде группы переключателей (кружочков), располагающихся вертикально. |
| field.select |
Кнопка для выбора из выпадающего списка. Используйте, когда список длинный, а выбрать нужно один вариант. |
| field.text |
Поле для ввода короткого текста, не больше одной строки. Чтобы добавить поле, где можно ввести много строк текста, используйте field.textarea. |
| field.text-annotation |
Компонент для сегментации текста. |
| field.textarea |
Поле для ввода многострочного текста. |
Хелперы (helpers)
| Component |
Description |
| 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)
| Component |
Description |
| 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)
Действия (actions)
| Component |
Description |
| 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 и наоборот. |
Источники данных
| Component |
Description |
| data.location |
Компонент передает координаты устройства исполнителя. |