layout.compare

Use it to arrange interface elements for comparing them. For example, you can compare several photos.

Selection buttons can be placed under each of the compared items. You can also add common elements, such as a field for comments.

Components used in the example

No buttons for hiding items. These are useful if you need to compare 5 photos at once and it's difficult to choose between two of them.
You can add individual selection buttons for every item being compared.

Component properties

Name	Type	Description
`type`*	"layout.compare"	Set component type.
`commonControls`	view	The common fields of the component. Add information blocks that are common to all the elements being compared.
`items`*	array	An array with properties of the elements being compared. Set the appearance of the component blocks.
`items[]`	object	The compared element.
`items[].content`	view	The content of the element that's being compared. Add images, audio recordings, videos, links, or other types of data.
`items[].controls`	view	Configure the input fields to make a Toloker select an item.
`minWidth`	number	Minimum width of the element in pixels. Default: 400 pixels.
`validation`	condition	Validation based on condition.
`wideCommonControls`	boolean	This property increases the common field size of the elements being compared. It's set to `false` by default: the common fields are displayed in the center, not stretched. If `true`, the fields are wider than with the default value.

Last updated: March 29, 2023

Introduction

Getting started

Important tips

Useful recommendations

Working with Toloka

Projects

Pools

Tasks

Results

Project analysis

Toloka settings

Task interface

Template Builder

HTML/CSS/JS editor

Help and support