Group

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

Вложенные Group

Group можно вкладывать в другой Group. Чаще всего вложенным компонентам нужно задать mode="plain" — это даёт прозрачный фон и скрывает рамки.

Заголовок группы. Передаётся либо в свойство header, либо в начале children, либо в Group.Header.

Свойство	Расположение	Рекомендуемый размер
`before`	Слева от всего контента	`28px`
`beforeTitle`	Слева от заголовка	`16px`
`afterTitle`	Справа от заголовка	`16px`
`beforeSubtitle`	Слева от подзаголовка	`12px`
`afterSubtitle`	Справа от подзаголовка	`12px`

Дополнительные элементы

indicator — отображает счётчик/статус:

<Header indicator={<Badge mode="prominent">12</Badge>}>Уведомления</Header>

after — контент справа от всего заголовка:

<Header after={<Switch label="Настройки" />}>Настройки</Header>

Пример использования

Group.ExpandedContent

Компенсирует внутренние отступы Group.

Подкомпонентный подход

Собрать Group самостоятельно можно с помощью следующих подкомпонентов:

Group.Container – служит оберткой, отвечающей за скругления и отступы внутри группы. Принимает все основные свойства Group, кроме header и description.
Group.Header – отвечает за отрисовку заголовка. Соответствует свойству header у Group. Рекомендуется использовать подкомпонент Header в качестве содержимого.
Group.Description – отвечает за отрисовку подписи в нижней части группы. Соответствует свойству description у Group.

Свойства и методы

Group

Свойство	Описание
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`description`	`ReactNode` Подпись под содержимым. По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`header`	`ReactNode` Элемент заголовка группы. По умолчанию: `-`
`mode`	`"card" \| "plain"` Режим отображения. Если установлен `card`, выглядит как карточка c обводкой и внешними отступами. Если `plain` — без отступов и обводки. По умолчанию режим отображения зависит от `viewWidth` (`card` при `SMALL_TABLET` и `plain` при `MOBILE`) В модальных окнах по умолчанию `plain`. По умолчанию: `-`
`padding`	`"s" \| "m"` Отвечает за отступы вокруг контента в режиме `card`. По умолчанию: `-`
`render`	`((props: AllHTMLAttributes<HTMLElement> & HasRootRef<HTMLElement>) => ReactNode)` Позволяет переопределить рендер компонента, получая собранные свойства (включая вычисленные `className` и `style`). Используется вместо `Component`. Позволяет гибко объединять несколько компонентов без создания промежуточных DOM-узлов и без ремаунта поддерева на каждый рендер. По умолчанию: `-`
`separator`	`"auto" \| "show" \| "hide"` `show` (только для `mode="plain"`) - разделитель всегда показывается `hide` - разделитель всегда спрятан, `auto` - разделитель рисуется автоматически между соседними группами. По умолчанию: `-`

Group.Container

Свойство	Описание
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`mode`	`"card" \| "plain"` Режим отображения. Если установлен `card`, выглядит как карточка c обводкой и внешними отступами. Если `plain` — без отступов и обводки. По умолчанию режим отображения зависит от `viewWidth` (`card` при `SMALL_TABLET` и `plain` при `MOBILE`) В модальных окнах по умолчанию `plain`. По умолчанию: `-`
`padding`	`"s" \| "m"` Отвечает за отступы вокруг контента в режиме `card`. По умолчанию: `m`
`render`	`((props: AllHTMLAttributes<HTMLElement> & HasRootRef<HTMLElement>) => ReactNode)` Позволяет переопределить рендер компонента, получая собранные свойства (включая вычисленные `className` и `style`). Используется вместо `Component`. Позволяет гибко объединять несколько компонентов без создания промежуточных DOM-узлов и без ремаунта поддерева на каждый рендер. По умолчанию: `-`
`separator`	`"auto" \| "show" \| "hide"` `show` (только для `mode="plain"`) - разделитель всегда показывается `hide` - разделитель всегда спрятан, `auto` - разделитель рисуется автоматически между соседними группами. По умолчанию: `auto`

Group.Header

Свойство	Описание
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`

Group.Description

Свойство Описание

Component

ElementType<any, keyof IntrinsicElements>

По умолчанию: -

getRootRef

Ref<HTMLElement>

По умолчанию: -

render

((props: AllHTMLAttributes<HTMLElement> & HasRootRef<HTMLElement>) => ReactNode)

Позволяет переопределить рендер компонента, получая собранные свойства (включая вычисленные className и style). Используется вместо Component.

Позволяет гибко объединять несколько компонентов без создания промежуточных DOM-узлов и без ремаунта поддерева на каждый рендер.

По умолчанию: -

Group.ExpandedContent

Свойство	Описание
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`direction`	`"inline" \| "block"` Направление отображения контента. По умолчанию: `inline`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`render`	`((props: AllHTMLAttributes<HTMLElement> & HasRootRef<HTMLElement>) => ReactNode)` Позволяет переопределить рендер компонента, получая собранные свойства (включая вычисленные `className` и `style`). Используется вместо `Component`. Позволяет гибко объединять несколько компонентов без создания промежуточных DOM-узлов и без ремаунта поддерева на каждый рендер. По умолчанию: `-`

Header

Свойство	Описание
`after`	`ReactNode` Допускаются иконки, текст, Link. По умолчанию: `-`
`afterSubtitle`	`ReactNode` Иконка справа от subtitle (рекомендуется использовать размер 12px). По умолчанию: `-`
`afterTitle`	`ReactNode` Иконка справа от title (рекомендуется использовать размер 16px). По умолчанию: `-`
`before`	`ReactNode` Иконка слева (рекомендуется использовать размер 28px). По умолчанию: `-`
`beforeSubtitle`	`ReactNode` Иконка слева от subtitle (рекомендуется использовать размер 12px). По умолчанию: `-`
`beforeTitle`	`ReactNode` Иконка слева от title (рекомендуется использовать размер 16px). По умолчанию: `-`
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `h2`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`indicator`	`ReactNode` Допускаются текст, Indicator. По умолчанию: `-`
`multiline`	`boolean` Возможность отображения текста в несколько строк. По умолчанию: `-`
`render`	`((props: AllHTMLAttributes<HTMLElement> & HasRootRef<HTMLElement>) => ReactNode)` Позволяет переопределить рендер компонента, получая собранные свойства (включая вычисленные `className` и `style`). Используется вместо `Component`. Позволяет гибко объединять несколько компонентов без создания промежуточных DOM-узлов и без ремаунта поддерева на каждый рендер. По умолчанию: `-`
`size`	`"s" \| "m" \| "l" \| "xl"` Размер компонента. По умолчанию: `m`
`subtitle`	`ReactNode` Подпись под основным текстом. По умолчанию: `-`
`subtitleComponent`	`ElementType<any, keyof IntrinsicElements>` Позволяет задать тип элемента в который будет обёрнут subtitle. По умолчанию: `span`

Свойство Описание

Свойство	Описание
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `footer`
`render`	`((props: AllHTMLAttributes<HTMLElement> & HasRootRef<HTMLElement>) => ReactNode)` Позволяет переопределить рендер компонента, получая собранные свойства (включая вычисленные `className` и `style`). Используется вместо `Component`. Позволяет гибко объединять несколько компонентов без создания промежуточных DOM-узлов и без ремаунта поддерева на каждый рендер. По умолчанию: `-`

Component

ElementType<any, keyof IntrinsicElements>

По умолчанию: footer

render

((props: AllHTMLAttributes<HTMLElement> & HasRootRef<HTMLElement>) => ReactNode)

По умолчанию: -

FormLayoutGroup

RadioGroup

Group

Вложенные Group

Header

Рекомендуемые размеры иконок

Дополнительные элементы

Пример использования

Group.ExpandedContent

Подкомпонентный подход

Свойства и методы

Group

Group.Container

Group.Header

Group.Description

Group.ExpandedContent

Header

Footer