---
metadata:
  - name: generator
    content: Diplodoc Platform v5.55.0
alternate:
  - https://yandex.ru/support/tasks-requester/ru/template-builder/reference/layout.side-by-side.md
  - href: ru/template-builder/reference/layout.side-by-side.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

# layout.side-by-side

Позволяет расставить элементы интерфейса так, чтобы сравнивать их между собой и скрывать лишние. Например, можно сравнить несколько фото.

Под сравниваемыми элементами можно добавить кнопки выбора или поле для ввода комментария.

Отличия от [layout.compare](https://yandex.ru/support/tasks-requester/ru/template-builder/reference/layout.compare.md):

- Есть кнопки, позволяющие скрывать элементы. Удобно, если надо сравнить сразу 5 фотографий и тяжело сделать выбор между какими-то двумя.
- Можно настроить только общие элементы управления. Отдельные кнопки под каждым сравниваемым элементом добавить нельзя.

[![Посмотреть пример](../_images/buttons/view-example.svg)](https://ya.cc/t/VLyfcZ9z4TNmdd)

{% cut "Компоненты, которые используются в примере" %}

<!-- source: ru/template-builder/_includes/reference/not-dot/action.set.md -->
* [action.set](https://yandex.ru/support/tasks-requester/ru/template-builder/reference/action.set.md)&nbsp;— устанавливает значение из `payload` в `data`;
<!-- endsource: ru/template-builder/_includes/reference/not-dot/action.set.md -->

<!-- source: ru/template-builder/_includes/reference/not-dot/data.output.md -->
* [data.output](https://yandex.ru/support/tasks-requester/ru/template-builder/operations/work-with-data.md)&nbsp;— определяет данные задания, которые вы получите после его отправки исполнителем;
<!-- endsource: ru/template-builder/_includes/reference/not-dot/data.output.md -->

<!-- source: ru/template-builder/_includes/reference/not-dot/plugin.hotkeys.md -->
* [plugin.hotkeys](https://yandex.ru/support/tasks-requester/ru/template-builder/reference/plugin.hotkeys.md)&nbsp;— добавляет [горячие клавиши](https://yandex.ru/support/tasks-requester/ru/template-builder/best-practices/hotkeys.md);
<!-- endsource: ru/template-builder/_includes/reference/not-dot/plugin.hotkeys.md -->

<!-- source: ru/template-builder/_includes/reference/not-dot/view.image.md -->
* [view.image](https://yandex.ru/support/tasks-requester/ru/template-builder/reference/view.image.md)&nbsp;— показывает картинку;
<!-- endsource: ru/template-builder/_includes/reference/not-dot/view.image.md -->

<!-- source: ru/template-builder/_includes/reference/not-dot/data.input.md -->
* [data.input](https://yandex.ru/support/tasks-requester/ru/template-builder/operations/work-with-data.md)&nbsp;— передает входные данные задания;
<!-- endsource: ru/template-builder/_includes/reference/not-dot/data.input.md -->

<!-- source: ru/template-builder/_includes/reference/not-dot/view.list.md -->
* [view.list](https://yandex.ru/support/tasks-requester/ru/template-builder/reference/view.list.md)&nbsp;— отображает данные списком;
<!-- endsource: ru/template-builder/_includes/reference/not-dot/view.list.md -->

<!-- source: ru/template-builder/_includes/reference/not-dot/field.radio-group.md -->
- [field.radio-group](https://yandex.ru/support/tasks-requester/ru/template-builder/reference/field.radio-group.md)&nbsp;— добавляет группу переключателей-радиокнопок для выбора одного ответа;
<!-- endsource: ru/template-builder/_includes/reference/not-dot/field.radio-group.md -->

<!-- source: ru/template-builder/_includes/reference/not-dot/field.textarea.md -->
* [field.textarea](https://yandex.ru/support/tasks-requester/ru/template-builder/reference/field.textarea.md)&nbsp;— добавляет поле для ввода многострочного текста;
<!-- endsource: ru/template-builder/_includes/reference/not-dot/field.textarea.md -->

<!-- source: ru/template-builder/_includes/reference/dot/condition.required.dot.md -->
* [condition.required](https://yandex.ru/support/tasks-requester/ru/template-builder/reference/condition.required.md)&nbsp;— проверяет, что поле с данными заполнено.
<!-- endsource: ru/template-builder/_includes/reference/dot/condition.required.dot.md -->

{% endcut %}

## Свойства компонента {#properties}

#|
|| **Название** | **Тип** | **Описание** ||
|| `type`<span style="color: red">\*</span> | "layout.side-by-side" | Задает тип компонента. ||
|| `controls`<span style="color: red">\*</span> | _view_ | Компоненты, которые позволят исполнителю совершить требуемые от него действия.

Например: [field.checkbox-group](https://yandex.ru/support/tasks-requester/ru/template-builder/reference/field.checkbox-group.md) или [field.button-radio-group](https://yandex.ru/support/tasks-requester/ru/template-builder/reference/field.button-radio-group.md). ||
|| `items`<span style="color: red">\*</span> | _array_ | Массив блоков информации. ||
|| `items[]` | _view_ | Компонент вывода или ввода информации. Например — [view.image](https://yandex.ru/support/tasks-requester/ru/template-builder/reference/view.image.md). ||
|| `minItemWidth` | _number_ | Минимальная ширина блока информации, не менее 400 пикселей. ||
|| `validation` | _condition_ | Валидация на основе условия _(condition)_. ||
|#