Group
Компонент для визуальной группировки связанных элементов интерфейса. Обеспечивает единое стилевое оформление, управление отступами и разделителями между блоками контента.
Вложенные Group
Компонент Group
можно вкладывать в другой компонент Group
. Обратите внимание, что чаще всего вложенные
компоненты должны иметь свойство mode="plain"
, это задаёт им прозрачный фон и скрывает рамки.
Header
Заголовок группы. Передаётся либо в свойство 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 />}>Настройки</Header>
Пример использования
Footer
Подвал группы. Передаётся в конце children
.
Доступность (a11y)
Семантическая роль
По умолчанию использует HTML-тег <footer>
, дополнительно задаётся роль role="contentinfo"
(для поддержки Safari<=13 ↗).
Предназначен для:
- контактной информации;
- ссылок на разделы сайта;
- копирайта и юридических данных;
- мета-информации о содержимом.
Ключевые правила
Сценарий | Решение | Почему важно |
---|---|---|
Глобальный подвал страницы | Только один на страницу | Соответствие стандартам WAI-ARIA |
Несколько подвалов | Добавить aria-label каждому | Различение разделов скринридерами |
Декоративный элемент | <Footer Component="div"> | Избежать ложной семантики |
Контекст использования
В данном примере первый Footer
“локальный”, потому что находится внутри секционного контента (компонент Group
)
и содержит мета-информацию, а второй Footer
- глобальный, потому что относится ко всей странице.
Множество
Несколько подвалов без контекста скринридеры воспринимают как дубли, чтобы этого избежать,
добавляйте aria-label
каждому компоненту:
<Footer aria-label="Навигация">
<Link href="#about">О нас</Link>
<Link href="#contacts">Контакты</Link>
</Footer>
<Footer aria-label="Юридическая информация">
<Text>© 2025 Компания</Text>
</Footer>
Пользовательский тэг
Используйте Component="div"
если:
- контент не соответствует семантике подвала;
- элемент используется для визуального оформления;
- уже есть глобальный подвал на странице.
// Декоративный раздел
<Footer Component="div">Информация на данной странице является конфиденциальной.</Footer>
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" Режим отображения. Если установлен По умолчанию: - |
padding | "s" | "m" Отвечает за отступы вокруг контента в режиме По умолчанию: - |
separator | "auto" | "show" | "hide"
По умолчанию: - |
Group.Container
Свойство | Описание |
---|---|
Component | ElementType<any, keyof IntrinsicElements> По умолчанию: - |
getRootRef | Ref<HTMLElement> По умолчанию: - |
mode | "card" | "plain" Режим отображения. Если установлен По умолчанию: - |
padding | "s" | "m" Отвечает за отступы вокруг контента в режиме По умолчанию: m |
separator | "auto" | "show" | "hide"
По умолчанию: auto |
Group.Header
Свойство | Описание |
---|---|
Component | ElementType<any, keyof IntrinsicElements> По умолчанию: - |
getRootRef | Ref<HTMLElement> По умолчанию: - |
Group.Description
Свойство | Описание |
---|---|
Component | ElementType<any, keyof IntrinsicElements> По умолчанию: - |
getRootRef | Ref<HTMLElement> По умолчанию: - |
Group.ExpandedContent
Свойство | Описание |
---|---|
Component | ElementType<any, keyof IntrinsicElements> По умолчанию: - |
direction | "inline" | "block" Направление отображения контента. По умолчанию: inline |
getRootRef | Ref<HTMLElement> По умолчанию: - |
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 Возможность отображения текста в несколько строк. По умолчанию: - |
size | "s" | "m" | "l" | "xl" Размер компонента. По умолчанию: m |
subtitle | ReactNode Подпись под основным текстом. По умолчанию: - |
subtitleComponent | ElementType<any, keyof IntrinsicElements> Позволяет задать тип элемента в который будет обёрнут subtitle. По умолчанию: span |
Footer
Свойство | Описание |
---|---|
Component | ElementType<any, keyof IntrinsicElements> По умолчанию: footer |