An option for placing (layout) items, which lets you arrange on a page:

  • The main content block.
  • An adjacent panel with controls.

The minWidth property sets the threshold for switching between widescreen and compact modes: when the width of the layout.sidebar component itself becomes less than the value set by the minWidth property, compact mode is enabled.

In widescreen mode, the control panel is located to the right of the main block.

In compact mode, controls stretch to the entire width and are located under each other.

To add an extra panel with controls, use the extraControls property.

View example
Components used in the example

Component properties

type*"layout.sidebar"Set component type.
content*viewContent placed in the main area.
controls*viewContent of the control panel.
controlsWidthnumberThe width of the control panel in widescreen mode. In compact mode, the panel takes up the entire available width. Default: 200 pixels.
extraControlsviewAn additional panel with controls. Located below the main panel.
minWidthnumberThe minimum width, in pixels, for widescreen mode. If the component width becomes less than the specified value, the interface switches to compact mode. Default: 400 pixels.
validationconditionValidation based on condition.
Contact support

Last updated: March 29, 2023

Getting started
Important tips
Useful recommendations
Working with Toloka
Project analysis
Toloka settings
Task interface
Template Builder
HTML/CSS/JS editor
Help and support