Исходник ↗Песочница ↗

Banner

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

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

Режимы отображения

Задаётся свойством mode.

Помимо стандартного режима (mode="tint"), поддерживается mode="image", предназначенный для отображения компонента с фоновым изображением.

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

Контентные блоки

Правая секция (after)

Поддерживает следующие варианты:

  • dismiss — кнопка закрытия;
  • chevron — индикатор перехода;
  • ReactNode — пользовательский элемент.
Загружается...

Левая секция (before)

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

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

Компонент поддерживает следующие текстовые элементы:

  • title — основной заголовок;
  • subtitle — дополнительный текст;
  • extraSubtitle — расширенное описание.
Загружается...

Действия

Для добавления действий используйте свойство actions.

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

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

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

Кнопки-действия. Принимает Button ↗.

  • В режиме tint или image со светлым фоном используйте только с параметрами:
    • mode="primary"
    • mode="secondary"
  • В режиме image с тёмным фоном используйте с параметрами:
    • appearance="overlay".

Для набора кнопок используйте ButtonGroup ↗ с параметрами:

  • gap="m" mode="horizontal" stretched
  • gap="m" mode="vertical" stretched.
По умолчанию: -
activatedboolean

Позволяет управлять activated-состоянием извне.

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

Deprecated: Since 7.3.0.

Свойство устарело и будет удалено в v8, используйте свойство activeMode.

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

Длительность показа active-состояния.

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

Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active.

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

Тип действия в правой части баннера.

  • dismiss – отображается иконка крестика, при нажатии на неё сработает свойство onDismiss.
  • chevron – отображается иконка шеврона, которая подразумевает, что при нажатии на баннер можно куда-то перейти.
По умолчанию: -
backgroundReactNode

При использовании mode="image".

Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.

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

Deprecated: Since 7.3.0.

Свойство устарело и будет удалено в v8, используйте свойство className.

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

Deprecated: Since 7.3.0.

Свойство устарело и будет удалено в v8, используйте свойство style.

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

Содержимое, отображаемое в левой части баннера.

По умолчанию: -
borderRadiusMode"auto" | "inherit"

Задает border-radius элементу В режиме auto на маленьких экранах border-radius: 0, иначе определяется токеном --vkui--size_border_radius--regular.

По умолчанию: -
ComponentElementType<any, keyof IntrinsicElements>
По умолчанию: -
dismissLabelstring

Текст кнопки закрытия. Делает ее доступной для ассистивных технологий.

По умолчанию: Скрыть
extraSubtitleReactNode

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

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

Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible

По умолчанию: -
getRootRefRef<HTMLElement>
По умолчанию: -
hasActiveboolean

Указывает, должен ли компонент реагировать на active-состояние.

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

Указывает, должен ли компонент реагировать на hover-состояние.

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

Позволяет родительскому компоненту иметь hovered-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается.

Присваивается родителькому компоненту.

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

Deprecated: Since 7.3.0.

Свойство устарело и будет удалено в v8, используйте свойство hoverMode.

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

Позволяет управлять hovered-состоянием извне.

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

Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover.

По умолчанию: -
imageTheme"dark" | "light"

При использовании mode="image".

  • light – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.
  • dark – в качестве фона используется тёмное изображение, цвет текста будет светлым.
По умолчанию: dark
mode"image" | "tint"

Тип баннера.

По умолчанию: tint
onDismissMouseEventHandler<HTMLButtonElement>

Срабатывает при нажатии на иконку крестика при after="dismiss".

По умолчанию: -
size"s" | "m"

Размер баннера.

По умолчанию: s
subtitleReactNode

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

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

Заголовок.

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

Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент.

Присваивается дочернему компоненту.

По умолчанию: -
Предыдущая
Badge
Следующая
Card