layout.compare

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

Кнопки выбора можно расположить под каждым из сравниваемых элементов. Также можно добавить общие элементы, например поле для ввода комментария.

Посмотреть пример в песочнице.

Отличия от layout.side-by-side:

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

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

Свойства компонента

НазваниеТипОписание
type*"layout.compare"

Задает тип компонента.

commonControlsview

Общие поля компонента. Добавьте блоки информации, которые относятся ко всем элементам сравнения.

items*array

Массив со свойствами элементов сравнения. Задайте внешний вид блоков компонента.

items[]object

Элемент сравнения.

items[].contentview

Содержание элемента сравнения. Добавьте в элемент сравнения картинки, аудиозаписи, видео, ссылки или другие типы данных.

items[].controlsview

Настройте поля ввода, чтобы пользователь выбрал один из элементов.

minWidthnumber

Минимальная ширина элемента в пикселях. Значение по умолчанию: 400 пикселей.

validationcondition

Валидация на основе условия (condition).

wideCommonControlsboolean

Свойство увеличивает общие поля элементов сравнения.По умолчанию false — общие поля не растягиваются и отображаются по центру. Если true, то поля будут шире, чем со значением по умолчанию.

НазваниеТипОписание
type*"layout.compare"

Задает тип компонента.

commonControlsview

Общие поля компонента. Добавьте блоки информации, которые относятся ко всем элементам сравнения.

items*array

Массив со свойствами элементов сравнения. Задайте внешний вид блоков компонента.

items[]object

Элемент сравнения.

items[].contentview

Содержание элемента сравнения. Добавьте в элемент сравнения картинки, аудиозаписи, видео, ссылки или другие типы данных.

items[].controlsview

Настройте поля ввода, чтобы пользователь выбрал один из элементов.

minWidthnumber

Минимальная ширина элемента в пикселях. Значение по умолчанию: 400 пикселей.

validationcondition

Валидация на основе условия (condition).

wideCommonControlsboolean

Свойство увеличивает общие поля элементов сравнения.По умолчанию false — общие поля не растягиваются и отображаются по центру. Если true, то поля будут шире, чем со значением по умолчанию.