PanelHeader

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

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

Загружается...

Заголовок

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

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

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

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

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

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

Внешний вид

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

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

Загружается...

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

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

Свойство float

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

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

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

Разделитель

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

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

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

если в PanelHeader рисуется Search;
если после PanelHeader рисуется Search;
если после PanelHeader рисуется Banner;
если в PanelHeader рисуются Tabs;
любой другой элемент, визуально разделяющий шапку и основной контент.

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

Загружается...

PanelHeaderButton

Подкомпонент для отрисовки кнопки в шапке – передаётся в свойство before и/или after.

Загружается...

Контент

В качестве содержимого компонента передавайте в свойство children либо иконку ↗, либо текст. Текстовые кнопки чаще всего используются в iOS, но есть исключения для android.

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

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

Загружается...

Пресеты

PanelHeaderBack

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

Загружается...

PanelHeaderClose

Кнопка “Отмена” в модальных окнах для закрытия текущего View в рамках View. На iOS будет показан текст, передаваемый как label, на Android и Desktop - <Icon28CancelOutline /> или <Icon24CancelOutline />. Если передать свойство label, то на Android и Desktop он будет скрыт, но виден для скринридеров.

Загружается...

PanelHeaderEdit

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

Загружается...

PanelHeaderSubmit

Кнопка “Готово” в модальных окнах для закрытия текущего View в рамках View и сохранения какого-либо результата. На iOS будет показан текст, передаваемый как label, на Android и Desktop - <Icon28DoneOutline /> или <Icon24DoneOutline />. Если передать свойство label, то на Android и Desktop текст будет скрыт, но виден для скринридеров.

Загружается...

PanelHeaderContent

Подкомпонент, предназначенный для создания сложного контента, включая добавление аватаров и подзаголовков.

Загружается...

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

Заголовок

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

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

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

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

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

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

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

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

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

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

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

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

PanelHeader

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

PanelHeaderButton

Свойство	Описание
`activated`	`boolean` Позволяет управлять `activated`-состоянием извне. По умолчанию: `-`
`activeClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`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. Свойство устарело и будет удалено в `v8`, используйте свойство `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. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`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` Скрыть надпись на платформе `ios`. По умолчанию: `false`
`hideLabelOnVKCom`	`boolean` Скрыть надпись на платформе `vkcom`. По умолчанию: `false`
`hoverClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `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. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`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. Свойство устарело и будет удалено в `v8`, используйте свойство `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. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`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. Свойство устарело и будет удалено в `v8`, используйте свойство `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. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`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. Свойство устарело и будет удалено в `v8`, используйте свойство `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` Подпись под основным текстом. По умолчанию: `-`

Panel

PanelHeaderContext