---
description: Компонент, предназначенный для создания заголовочной секции (шапки) внутри компонента Panel.
---

<Overview group="navigation">

# PanelHeader [tag:component]

Компонент, предназначенный для создания заголовочной секции (шапки) внутри компонента [`Panel`](/components/panel).

Связанные компоненты:

- [`Panel`](/components/panel)
- [`PanelHeaderContext`](/components/panel-header-context)

</Overview>

import { FixedLayoutWrapper } from '@/components/wrappers';

{/* @example-description: Базовая шапка `PanelHeader` с контентом в `before/after` и заголовком. */}
<Playground Wrapper={FixedLayoutWrapper}>
  ```jsx
  <PanelHeader before={<PanelHeaderClose />} after={<Avatar size={36} />} delimiter="none">
    Стартовый экран
  </PanelHeader>
  ```
</Playground>

## Заголовок

Основной текст следует передавать в свойство `children`. В зависимости от платформы заголовок будет либо
располагаться слева, либо будет выровнен по центру (платформа iOS).

Дополнительно есть возможность передать в свойстве `typographyProps` параметры для типографического элемента заголовка,
например, `Component` (тэг для рендеринга компонента, `span` по умолчанию) или `data`-атрибуты.

> Если вы хотите использовать в качестве заголовка не только текст, но и подзаголовок и/или иконки и аватары,
> воспользуйтесь специальным подкомпонентом [`PanelHeaderContent`](#panel-header-content), который также передаётся в `children`.

## Контент в начале

Используйте свойства `before` для добавления дополнительного контента слева от заголовка.
Наиболее частый вариант использования свойства `before` - иконки (например "Назад", "Закрыть") или текстовые кнопки (на платформе iOS).
Также допускается использовать компонент `Avatar` (размером `28px` или `36px`).

## Контент в конце

Используйте свойства `after` для добавления дополнительного контента справа от заголовка.
Наиболее частый вариант использования свойства `after` - иконки и компонент `Avatar` (размером `28px` или `36px`).
Допускается использование нескольких иконок одновременно (компонент автоматически расставит между ними отступы).

## Внешний вид

### Прозрачный фон

Булево свойство `transparent` позволяет задать компоненту прозрачный фон.

{/* @example-description: `PanelHeader` с прозрачным фоном через свойство `transparent`. */}
<Playground Wrapper={FixedLayoutWrapper}>
  ```jsx
  <PanelHeader
    before={<PanelHeaderClose />}
    after={<Avatar size={36} />}
    transparent
    delimiter="none"
  >
    Стартовый экран
  </PanelHeader>
  ```
</Playground>

## Позиционирование

### Плавающая шапка

Свойство `float`

Свойство `fixed` позволяет шапке выбиваться из потока и фиксироваться сверху при прокрутке основного контента.

- `true` - шапка фиксируется сверху;
- `false` - шапка остаётся в потоке и прокручивается вместе с контентом.

По умолчанию значение `true` на всех платформах, кроме `vkcom`.

## Разделитель

Используйте свойство `delimiter`, оно позволяет управлять типом разделителя (разделительная линия или отступ).
Доступны следующие значения:

- `"none"` - разделитель отсутствует;
- `"separator"` - добавляется разделительная линия при условии, что это либо платформа `vkcom`,
  либо платформа android/iOS на мобильных устройствах;
- `"spacing"` - добавляется отступ, если это платформа android/iOS на планшетах и десктопах;
- `"auto"` - автоматически подбирает разделительную линию или отступ в зависимости от
  удовлетворяющих условий `"separator"` или `"spacing"`.

Исключения, в которых разделительная линия после шапки не нужна (включая мобильные устройства android/iOS):

- если в `PanelHeader` рисуется [`Search`](/components/search);
- если после `PanelHeader` рисуется `Search`;
- если после `PanelHeader` рисуется [`Banner`](/components/banner);
- если в `PanelHeader` рисуются [`Tabs`](/components/tabs);
- любой другой элемент, визуально разделяющий шапку и основной контент.

В таких случаях передавайте в `PanelHeader` свойство `delimiter="spacing"`, это позволит сохранить отступ
на планшетах и десктопах, но обеспечит отсутствие разделительной линии для мобильных устройствах.

{/* @example-description: Пример использования `delimiter="spacing"` для корректного разделения шапки и контента. */}
<Playground Wrapper={FixedLayoutWrapper}>
  ```jsx
  <Panel>
    <PanelHeader delimiter="spacing" before={<PanelHeaderClose />} after={<Avatar size={36} />}>
      Стартовый экран
    </PanelHeader>
    <Group mode="plain" separator="hide">
      <Div>
        <Text>Контент</Text>
      </Div>
    </Group>
  </Panel>
  ```
</Playground>

## PanelHeaderButton [#panel-header-button] [tag:component]

Подкомпонент для отрисовки кнопки в шапке – передаётся в свойство `before` и/или `after` компонента [`PanelHeader`](/components/panel-header).

{/* @example-description: Базовый `PanelHeaderButton` с иконкой действия в шапке. */}
<Playground>
  ```jsx
  <PanelHeaderButton aria-label="Уведомления">
    <Icon28Notifications />
  </PanelHeaderButton>
  ```
</Playground>

### Контент

В качестве содержимого компонента передавайте в свойство `children` либо [иконку](https://vkcom.github.io/icons/),
либо текст. Текстовые кнопки чаще всего используются в iOS, но есть исключения для android.

Обратите внимание, что для планшетов и десктопов рекомендуется использовать кнопки размером `24px`,
а для мобильных устройств - размером `28px` (возможно, будет полезен [AdaptiveIconRenderer](/components/adaptive-icon-renderer)).

Если нужно несколько кнопок в ряд, то используйте `React.Fragment`:

{/* @example-description: Несколько кнопок в шапке с группировкой через `React.Fragment`. */}
<Playground>
  ```jsx
  <React.Fragment>
    <PanelHeaderButton aria-label="Настройки">
      <Icon28SettingsOutline />
    </PanelHeaderButton>
    <PanelHeaderButton aria-label="Уведомления">
      <Icon28Notifications />
    </PanelHeaderButton>
  </React.Fragment>
  ```
</Playground>

### Пресеты

#### PanelHeaderBack [#panel-header-back]

Кнопка назад в экранах в рамках одного сценария ([`View`](/components/view)). Внутри инкапсулирована логика показа нужной иконки для платформы.
Также можно передать свойство `label`, для отображения текста, который будет виден на платформах vkcom и iOS, но будет скрыт на Android.
С помощью свойств `hideLabelOnVKCom` и `hideLabelOnIOS` можно также визуально скрыть `label` на соответствующих платформах, он будет виден только для скринридеров.

{/* @example-description: Кнопка возврата `PanelHeaderBack` с платформенной иконкой. */}
<Playground>
  ```jsx
  <PanelHeaderBack />
  ```
</Playground>

#### PanelHeaderClose [#panel-header-close]

Кнопка "Отмена" в модальных окнах для закрытия текущего [`View`](/components/view) в рамках [`View`](/components/root). На iOS будет
показан текст, передаваемый как `label`, на Android и Desktop - `<Icon28CancelOutline />` или `<Icon24CancelOutline />`. Если
передать свойство `label`, то на Android и Desktop он будет скрыт, но виден для скринридеров.

{/* @example-description: Кнопка закрытия `PanelHeaderClose` для модальных и навигационных сценариев. */}
<Playground>
  ```jsx
  <PanelHeaderClose />
  ```
</Playground>

#### PanelHeaderEdit [#panel-header-edit]

Кнопка "Редактировать". Принимает свойство `isActive`, которое определяет состояние кнопки (включен ли режим редактирования).
Для указания кастомных текстов для состояний можно использовать соответствующие свойства `doneLabel` и `editLabel`. Данные тексты
будут видны на iOS, а на Android и Desktop они будет скрыты, но видны для скринридеров.

{/* @example-description: Кнопка редактирования `PanelHeaderEdit` с переключаемым состоянием. */}
<Playground>
  ```jsx
  <PanelHeaderEdit />
  ```
</Playground>

#### PanelHeaderSubmit [#panel-header-submit]

Кнопка "Готово" в модальных окнах для закрытия текущего [`View`](/components/view) в рамках [`View`](/components/root) и сохранения
какого-либо результата. На iOS будет показан текст, передаваемый как `label`, на Android и Desktop - `<Icon28DoneOutline />`
или `<Icon24DoneOutline />`. Если передать свойство `label`, то на Android и Desktop текст будет скрыт, но виден для скринридеров.

{/* @example-description: Кнопка подтверждения `PanelHeaderSubmit` для завершения действия. */}
<Playground>
  ```jsx
  <PanelHeaderSubmit />
  ```
</Playground>

## PanelHeaderContent [#panel-header-content] [tag:component]

Подкомпонент, предназначенный для создания сложного контента в [`PanelHeader`](/components/panel-header), включая добавление аватаров и подзаголовков.

<Playground hide>
  ```jsx
  <Box inlineSize={270}>
    <PanelHeaderContent subtitle="был в сети сегодня, в 18:46" before={<Avatar size={36} />}>
      Жук Петрович
    </PanelHeaderContent>
  </Box>
  ```
</Playground>

{/* @example-description: `PanelHeaderContent` с аватаром и подзаголовком в составе шапки. */}
<Playground style={{ width: 270 }}>
  ```jsx
  <PanelHeaderContent subtitle="был в сети сегодня, в 18:46" before={<Avatar size={36} />}>
    Жук Петрович
  </PanelHeaderContent>
  ```
</Playground>

### Текстовые элементы

#### Заголовок

Текст заголовка следует передавать в свойство `children` данного компонента.

#### Дополнительный контент заголовка

В свойство `aside` можно передать дополнительный контент (чаще всего, иконку размером `12px`), который будет
располагаться справа от заголовка.

#### Подзаголовок

Подзаголовок, располагающийся под заголовком, следует передавать в свойство `subtitle`.

### Контент в начале

В компоненте доступна возможность добавления дополнительного контента в начале через свойство `before`.
Наиболее частый вариант использования свойства `before` - аватары (компонент `Avatar`).

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

- на мобильных устройствах старайтесь использовать аватары размером `36px`;
- на планшетах и десктопах аватары размером `32px`.

### Обработчики событий

Компонент позволяет обрабатывать нажатия через свойство `onClick`. В таком случае вся шапка становится кликабельным
элементом (`role="button"`), поэтому старайтесь не вкладывать другие интерактивные элементы (кнопки, ссылки), чтобы
не нарушать `a11y`.

## Свойства и методы [#api]

### PanelHeader

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `after` | `ReactNode` | `-` | Добавляет элемент справа.  При передаче нескольких элементов, расставляет отступы между ними. |
| `before` | `ReactNode` | `-` | Добавляет элемент слева. |
| `delimiter` | `"none" \| "separator" \| "auto" \| "spacing"` | `auto` | Тип разделителя под шапкой.  - `"none"` означает, что разделитель не нужен - `"separator"` включает сепаратор при условии, что это:      - либо платформа `vkcom`      - либо платформа `android`/`ios` при `<AdaptivityProvider viewWidth={ViewWidth.MOBILE} />` - `"spacing"` включает отступ, если это платформа `android`/`ios` при `<AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET} />` - `"auto"` автоматически подбирает либо `"separator"`, либо `"spacing"` по их условиям. |
| `fixed` | `boolean` | `-` | Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`. |
| `float` | `boolean` | `false` | Высота шапки будет игнорироваться контентом панели. |
| `getRef` | `Ref<HTMLDivElement>` | `-` |  |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `shadow` | `boolean` | `-` | **Deprecated**: Since 7.4.0. Будет удалено в **VKUI v9**. |
| `transparent` | `boolean` | `false` | Прозрачный фон компонента. |
| `typographyProps` | `(HasComponent & HTMLAttributes<HTMLElement> & HasDataAttribute)` | `{}` | По умолчанию как `Component` используется `span`. |

### PanelHeaderButton

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `activated` | `boolean` | `-` | Позволяет управлять `activated`-состоянием извне. |
| `activeClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `activeMode`. |
| `activeEffectDelay` | `number` | `200` | Длительность показа `active`-состояния. |
| `activeMode` | `StateModeLiteral` | `-` | Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. |
| `borderRadiusMode` | `"auto" \| "inherit"` | `-` | Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `focusVisibleMode` | `FocusVisibleMode` | `-` | Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `hasActive` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `active`-состояние. |
| `hasHover` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `hover`-состояние. |
| `hasHoverWithChildren` | `boolean` | `-` | Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается.  Присваивается родителькому компоненту. |
| `hoverClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `hoverMode`. |
| `hovered` | `boolean` | `-` | Позволяет управлять `hovered`-состоянием извне. |
| `hoverMode` | `StateModeLiteral` | `-` | Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. |
| `label` | `ReactNode` | `-` | Текст или содержимое кнопки. |
| `primary` | `boolean` | `false` | Флаг для обозначения первичной кнопки Влияет на стилизацию кнопки. |
| `unlockParentHover` | `boolean` | `-` | Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент.  Присваивается дочернему компоненту. |

### PanelHeaderBack

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `activated` | `boolean` | `-` | Позволяет управлять `activated`-состоянием извне. |
| `activeClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `activeMode`. |
| `activeEffectDelay` | `number` | `-` | Длительность показа `active`-состояния. |
| `activeMode` | `StateModeLiteral` | `-` | Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. |
| `borderRadiusMode` | `"auto" \| "inherit"` | `-` | Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `focusVisibleMode` | `FocusVisibleMode` | `-` | Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `hasActive` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `active`-состояние. |
| `hasHover` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `hover`-состояние. |
| `hasHoverWithChildren` | `boolean` | `-` | Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается.  Присваивается родителькому компоненту. |
| `hideLabelOnIOS` | `boolean` | `false` | Скрыть надпись на платформе `ios`. |
| `hideLabelOnVKCom` | `boolean` | `false` | Скрыть надпись на платформе `vkcom`. |
| `hoverClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `hoverMode`. |
| `hovered` | `boolean` | `-` | Позволяет управлять `hovered`-состоянием извне. |
| `hoverMode` | `StateModeLiteral` | `-` | Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. |
| `label` | `ReactNode` | `Назад` | Текст или содержимое кнопки. |
| `primary` | `boolean` | `-` | Флаг для обозначения первичной кнопки Влияет на стилизацию кнопки. |
| `unlockParentHover` | `boolean` | `-` | Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент.  Присваивается дочернему компоненту. |

### PanelHeaderClose

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `activated` | `boolean` | `-` | Позволяет управлять `activated`-состоянием извне. |
| `activeClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `activeMode`. |
| `activeEffectDelay` | `number` | `-` | Длительность показа `active`-состояния. |
| `activeMode` | `StateModeLiteral` | `-` | Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. |
| `borderRadiusMode` | `"auto" \| "inherit"` | `-` | Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `focusVisibleMode` | `FocusVisibleMode` | `-` | Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `hasActive` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `active`-состояние. |
| `hasHover` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `hover`-состояние. |
| `hasHoverWithChildren` | `boolean` | `-` | Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается.  Присваивается родителькому компоненту. |
| `hoverClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `hoverMode`. |
| `hovered` | `boolean` | `-` | Позволяет управлять `hovered`-состоянием извне. |
| `hoverMode` | `StateModeLiteral` | `-` | Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. |
| `label` | `ReactNode` | `Отмена` | Текст или содержимое кнопки. |
| `primary` | `boolean` | `-` | Флаг для обозначения первичной кнопки Влияет на стилизацию кнопки. |
| `unlockParentHover` | `boolean` | `-` | Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент.  Присваивается дочернему компоненту. |

### PanelHeaderEdit

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `activated` | `boolean` | `-` | Позволяет управлять `activated`-состоянием извне. |
| `activeClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `activeMode`. |
| `activeEffectDelay` | `number` | `-` | Длительность показа `active`-состояния. |
| `activeMode` | `StateModeLiteral` | `-` | Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. |
| `borderRadiusMode` | `"auto" \| "inherit"` | `-` | Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `doneLabel` | `string` | `Готово` | Текст кнопки при активном режиме редактирования для выхода из него. Визуально скрыт везде, кроме iOS. |
| `editLabel` | `string` | `Редактировать` | Текст кнопки, когда режим редактирования не активен. Визуально скрыт везде, кроме iOS. |
| `focusVisibleMode` | `FocusVisibleMode` | `-` | Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `hasActive` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `active`-состояние. |
| `hasHover` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `hover`-состояние. |
| `hasHoverWithChildren` | `boolean` | `-` | Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается.  Присваивается родителькому компоненту. |
| `hoverClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `hoverMode`. |
| `hovered` | `boolean` | `-` | Позволяет управлять `hovered`-состоянием извне. |
| `hoverMode` | `StateModeLiteral` | `-` | Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. |
| `isActive` | `boolean` | `false` | Включен ли режим редактирования. |
| `primary` | `boolean` | `-` | Флаг для обозначения первичной кнопки Влияет на стилизацию кнопки. |
| `unlockParentHover` | `boolean` | `-` | Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент.  Присваивается дочернему компоненту. |

### PanelHeaderSubmit

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `activated` | `boolean` | `-` | Позволяет управлять `activated`-состоянием извне. |
| `activeClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `activeMode`. |
| `activeEffectDelay` | `number` | `-` | Длительность показа `active`-состояния. |
| `activeMode` | `StateModeLiteral` | `-` | Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. |
| `borderRadiusMode` | `"auto" \| "inherit"` | `-` | Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `focusVisibleMode` | `FocusVisibleMode` | `-` | Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `hasActive` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `active`-состояние. |
| `hasHover` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `hover`-состояние. |
| `hasHoverWithChildren` | `boolean` | `-` | Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается.  Присваивается родителькому компоненту. |
| `hoverClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `hoverMode`. |
| `hovered` | `boolean` | `-` | Позволяет управлять `hovered`-состоянием извне. |
| `hoverMode` | `StateModeLiteral` | `-` | Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. |
| `label` | `ReactNode` | `Готово` | Текст или содержимое кнопки. |
| `primary` | `boolean` | `-` | Флаг для обозначения первичной кнопки Влияет на стилизацию кнопки. |
| `unlockParentHover` | `boolean` | `-` | Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент.  Присваивается дочернему компоненту. |

### PanelHeaderContent

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `aside` | `ReactNode` | `-` | Компонент отображаемый после содержимого. |
| `before` | `ReactNode` | `-` | Компонент отображаемый до содержимого. |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `subtitle` | `ReactNode` | `-` | Подпись под основным текстом. |