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
Background	Цвет заливки группы: значение RGBA или значение из палитры согласно дизайн-системе Платформы Multi-D, например, MAIN_5	string
BackgroundImage	URL-адрес (относительно корневой папки) фонового изображения	string
BackgroundPosition	Позиция фонового изображения	string
BackgroundRepeat	Повтор фонового изображения	string
Border	Толщина, цвет и стиль границы группы	string
BorderRadius	Закругление границ	string
BorderWidth	Ширина границы	string
CSS	Массив строк-классов CSS-стилей компонента	array
Color	Цвет шрифта группы: значение RGBA или значение из палитры согласно дизайн-системе Платформы Multi-D, например, MAIN_5	string
Cursor	Тип курсора при наведении указателя мыши	enum		`Default` - `Pointer` - `Text` - `Not-allowed` - -
Height	Высота в пикселях (используется по умолчанию), процентах или значение auto	string
Hidden	Признак состояния компонента Скрыт	boolean
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
HoveredBackground	Цвет заливки при наведении указателя мыши на группу: значение RGBA или значение из палитры согласно дизайн-системе Платформы Multi-D, например, MAIN_5	string
HoveredBackgroundImage	Цвет фонового изображения при наведении на него указателя мыши	string
HoveredColor	Цвет шрифта при наведении указателя мыши на группу: значение RGBA или значение из палитры согласно дизайн-системе Платформы Multi-D, например, MAIN_5	string
HoveredTransform	Преобразование компонента при наведении указателя мыши	string
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
MaxWidth	Максимальная ширина в пикселях (используется по умолчанию), процентах или значение auto	string
MinWidth	Минимальная ширина в пикселях (используется по умолчанию), процентах или значение auto	string
Mode	Расположение компонентов в группе	enum	Row	`Row` - Компоненты в группе расположены в строку `Wrap` - Компоненты в группе расположены в строку с переносом на новую строку `Column` - Компоненты в группе расположены в столбец `ColumnWithScroll` - Компоненты в группе расположены в столбец с полосой прокрутки
OnClick	Обработчик события Click	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>

Свойства​

Примеры​

Свойства

Примеры