Перейти к основному содержимому

Group

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

Используется для управления расположением компонентов в группе. Позволяет располагать компоненты в группе следующим образом:

  • Row: в строку;
  • Wrap: в строку с переносом на новую строку;
  • Column: в столбец;
  • ColumnWithScroll: в столбец с полосой прокрутки. Поддерживает вертикальную и горизонтальную прокрутку. Позволяет управлять цветом шрифта и фона, задавать фоновое изображение и выравнивание компонентов в группе, а также стили границ.
  <Group CSS={['mb-8']} Align="Center" VerticalAlign="Center">
    <Text Value="Hello world" />
  </Group>

Свойства​

Align​

Горизонтальное выравнивание дочерних компонентов.

Тип: enum

Значение по умолчанию: Start

Возможные значения:

Start -
Дочерние компоненты выравниваются относительно левой границы
End -
Дочерние компоненты выравниваются относительно правой границы
Center -
Дочерние компоненты выравниваются относительно центра группы
Space-between -
Дочерние компоненты равномерно распределены по ширине группы, первый компонент — в начале, последний — в конце

Animated​

Признак применения CSS-анимации к компоненту: true — CSS-анимация применяется; false — CSS-анимация не применяется.

Тип: boolean

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-стилей, описанных в файле CSS.css разрабатываемого проекта или встроенных CSS-стилей Атомкод.

Пример:

// внешние (m) и внутренние (p) отступы для компонента. 
// Число после символа "-" (в этом примере представлено числом 4) должно быть кратно величине,
// указанной в параметре, определяющем кратность отступов, 
// в файле Style.mdtheme разрабатываемого проекта.
CSS={["m-4", "p-4"]}

Тип: array

Color​

Цвет шрифта группы: значение RGBA или значение из палитры согласно дизайн-системе Атомкод, например, MAIN_5.

Тип: string

CombineConfig​

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых блоков кода. Описывает код вызова действий типа Static, код вызова действий, описанных в параметре subscribe источника данных, а также переход к экранной форме с настроенными параметрами маршрутизации.

Тип: object

Cursor​

Тип курсора при наведении указателя мыши.

Тип: enum

Возможные значения:

Default - Pointer - Text - Not-allowed -​

Height​

Высота компонента в пикселях (используется по умолчанию), процентах или значение auto.

Тип: string

Hidden​

Признак состояния компонента Скрыт: true — компонент скрыт; false — компонент отображается.

Тип: boolean

Hint​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на белом фоне.

Тип: any

HoveredBackground​

Цвет заливки при наведении указателя мыши на группу: значение RGBA или значение из палитры согласно дизайн-системе Атомкод, например, MAIN_5.

Тип: string

HoveredBackgroundImage​

Фоновое изображение при наведении на него указателя мыши. Может быть задано как псевдоним значка или как данные в формате Base64.

Тип: string

HoveredColor​

Цвет шрифта при наведении указателя мыши на группу: значение RGBA или значение из палитры согласно дизайн-системе Атомкод, например, MAIN_5.

Тип: string

HoveredTransform​

Преобразование компонента при наведении указателя мыши.

Тип: string

Id​

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

MaxWidth​

Максимальная ширина компонента в пикселях (используется по умолчанию), процентах или значение auto.

Тип: string

MinWidth​

Минимальная ширина компонента в пикселях (используется по умолчанию), процентах или значение auto.

Тип: string

Mode​

Расположение дочерних компонентов в группе.

Тип: enum

Значение по умолчанию: Row

Возможные значения:

Row -
Дочерние компоненты расположены в строку
Wrap -
Дочерние компоненты расположены в строку с переносом на новую строку
Column -
Дочерние компоненты расположены в столбец
ColumnWithScroll -
Дочерние компоненты расположены в столбец с полосой прокрутки

OnClick​

Обработчик события нажатия левой кнопки мыши, когда указатель мыши находится на компоненте.

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnClick={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnKeyDown​

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent.

Пример:

OnKeyDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnKeyUp​

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent.

Пример:

OnKeyUp={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseDown​

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseEnter​

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseEnter={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseLeave​

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseLeave={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseMove​

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseMove={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseOut​

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseOut={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseOver​

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseOver={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseUp​

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseUp={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnScroll​

Обработчик события прокрутки содержимого группы. В качестве параметра принимает объект со следующими полями:

{
  offsetWidth,
  clientWidth,
  scrollWidth,
  offsetHeight,
  clientHeight,
  scrollHeight,
  scrollTop,
  scrolLeft
}

Тип: undefined

OnUnmount​

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров.

Пример:

OnUnmount={() => {
  // Отмена выполнения периодического действия при размонтировании экранной формы
    return clearInterval(getValue("pleerInterval"))
  }
}

Тип: undefined

Scroll​

Позиция полосы прокрутки в пикселях.

Тип: number

Значение по умолчанию: -1

Slot​

Именованное пространство во фрагменте экранной формы или именованное пространство в шаблоне компонента с возможностью шаблонизации, например, Select, DataGrid.

Тип: string

Tooltip​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне.

Тип: any

TraceId​

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода при изменении состояния компонента.

Тип: string

Transform​

Двумерные преобразования компонента: масштаб, вращение, сдвиг, наклон.

Свойство transform может принимать следующие значения:

  • none: преобразование не применяется;
  • translate(x, y): перемещает компонент по оси X на значение x и по оси Y на значение y;
  • rotate(angle): поворачивает компонент на угол angle;
  • scale(x, y): изменяет масштаб компонента по оси X на значение x и по оси Y на значение y;
  • skew(x-angle, y-angle): искажает компонент на угол x-angle по оси X и y-angle по оси Y.

Можно комбинировать несколько преобразований.

Пример:

transform: scale(0.5) translate(-100%, -100%)

Подробнее см. transform.

Тип: string

VerticalAlign​

Вертикальное выравнивание дочерних компонентов.

Тип: enum

Значение по умолчанию: Start

Возможные значения:

Start -
Дочерние компоненты выравниваются относительно верхней границы
End -
Дочерние компоненты выравниваются относительно нижней границы
Center -
Дочерние компоненты выравниваются относительно центра группы
Space-between -
Дочерние компоненты равномерно распределены по высоте группы, первый компонент — у верхней границы, последний — у нижней границы

Visible​

Признак инверсии состояния компонента Скрыт: true — компонент отображается; false — компонент скрыт.

Тип: 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>