layout.sidebar

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.

Component properties

NameTypeDescription
type*"layout.sidebar"

Set component type

content*view

Content placed in the main area.

controls*view

Content of the control panel.

controlsWidthnumber

The width of the control panel in widescreen mode. In compact mode, the panel takes up the entire available width. Default: 200 pixels.

extraControlsview

An additional panel with controls. Located below the main panel.

minWidthnumber

The 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.

validationcondition

Validation based on condition.