Group

Отображает группу компонентов

Используется для управления расположением компонентов в группе, например, в строку, в столбец, в столбец с прокруткой. Поддерживает вертикальную и горизонтальную прокрутку. Позволяет управлять цветом шрифта, фона, задавать фоновое изображение, выравнивание компонентов в группе, стили границ.

  <Group CSS={['mb-8']} Align="Center" VerticalAlign="Center">
    <Text Value="Hello world" />
  </Group> 

Свойства

Имя	Описание	Тип	Значение по умолчанию	Возможные значения
Align	Горизонтальное выравнивание компонентов в группе	enum	Start	Start - Компоненты в группе выравниваются относительно левой границы End - Компоненты в группе выравниваются относительно правой границы Center - Компоненты в группе выравниваются относительно центра группы Space-between - Компоненты в группе равномерно распределены по ширине группы, первый элемент — в начале, последний — в конце
Animated	Признак применения CSS-анимации к группе	boolean	False
Background	Цвет заливки группы: значение RGBA или значение из палитры согласно дизайн-системе Платформы, например, MAIN_5	string
BackgroundImage	Фоновое изображение. Передается в виде алиаса иконки, либо в виде данных, закодированных в Base64	string
BackgroundPosition	Позиция фонового изображения	string
BackgroundRepeat	Повтор фонового изображения	string
Badge	Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)	any
Border	Толщина, цвет и стиль границы группы	string
BorderRadius	Закругление границ	string
BorderWidth	Ширина границы	string
CSS	Массив строк-классов CSS-стилей компонента	array
Color	Цвет шрифта группы: значение RGBA или значение из палитры согласно дизайн-системе Платформы, например, MAIN_5	string
CombineConfig	Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную	object
Cursor	Тип курсора при наведении указателя мыши	enum		Default - Pointer - Text - Not-allowed - -
Height	Высота в пикселях (используется по умолчанию), процентах или значение auto	string
Hidden	Признак состояния компонента Скрыт	boolean	False
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
HoveredBackground	Цвет заливки при наведении указателя мыши на группу: значение RGBA или значение из палитры согласно дизайн-системе Платформы, например, MAIN_5	string
HoveredBackgroundImage	Фоновое изображение при наведении на него указателя мыши. Передается в виде алиаса иконки, либо в виде данных, закодированных в Base64	string
HoveredColor	Цвет шрифта при наведении указателя мыши на группу: значение RGBA или значение из палитры согласно дизайн-системе Платформы, например, MAIN_5	string
HoveredTransform	Преобразование компонента при наведении указателя мыши	string
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
MaxWidth	Максимальная ширина в пикселях (используется по умолчанию), процентах или значение auto	string
MinWidth	Минимальная ширина в пикселях (используется по умолчанию), процентах или значение auto	string
Mode	Расположение компонентов в группе	enum	Row	Row - Компоненты в группе расположены в строку Wrap - Компоненты в группе расположены в строку с переносом на новую строку Column - Компоненты в группе расположены в столбец ColumnWithScroll - Компоненты в группе расположены в столбец с полосой прокрутки
OnClick	Обработчик события нажатия кнопки мыши	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnScroll	Обработчик события прокрутки содержимого группы с единственным параметром: { offsetWidth, clientWidth, scrollWidth, offsetHeight, clientHeight, scrollHeight, scrollTop, scrolLeft }	undefined
OnUnmount	Обработчик события Unmount	undefined
Scroll	Позиция полосы прокрутки в пикселях	number	-1
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Transform	Трансформация компонента: масштаб, вращение, сдвиг, наклон	string
VerticalAlign	Вертикальное выравнивание компонентов в группе	enum	Start	Start - Компоненты в группе выравниваются относительно верхней границы End - Компоненты в группе выравниваются относительно нижней границы Center - Компоненты в группе выравниваются относительно центра группы Space-between - Компоненты в группе равномерно распределены по высоте группы, первый элемент — у верхней границы, последний — у нижней границы
Visible	Признак инверсии состояния компонента Скрыт	boolean	True
Width	Ширина в пикселях (используется по умолчанию), процентах или значение auto	string
ZIndex	Возможность управлять позиционированием группы с помощью CSS-свойства z-index	number	-1

Примеры

JSX:

<Group Mode={"Column"}>
  <Text Mode="H3" CSS={['pt-16']} Value="Пример: выравнивание по центру" />
  <Group Align="Center" VerticalAlign="Center">
    <Text Value="Hello world" />
  </Group> 
  <Text Mode="H3" CSS={['pt-16']} Value="Пример: две колонки (левая фиксированная) с подвалом" />
  <Group Mode="ColumnWithScroll">
    <Group Height="60px" Color="WHITE" Background="GRAY_4" HoveredBackground="GRAY_5">
      <Text Value="Header" />
    </Group>
    <Group 
      Mode="Row"
      Border="1px GRAY_4 solid"
      BorderRadius="0 0px 10px 10px"
      BorderWidth="2px"
    >
      <Group Width="100px">
        <Text Value="Left fixed column" />
      </Group>
      <Group Mode="ColumnWithScroll">
        <Text Value="Right column" />
      </Group>
    </Group>
    <Group Height="60px">
      <Text Value="Footer" />
    </Group>
  </Group>
  <Text Mode="H3" CSS={['pt-16']} Value="Пример: использование слотов" />  
</Group>