ModalOutsideButton

Компонент для отрисовки кнопок в правом верхнем углу в compact-версии ModalPage и ModalCard. Внутрь компонента желательно передавать иконки размером 20px, все стили будут автоматически применены в соответствии с дизайн-системой.

Кнопка передается в свойство outsideButtons в ModalPage и ModalCard, при необходимости передать несколько кнопок одновременно - воспользуйтесь React.Fragment.

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

Чтобы кнопка была доступной для ассистивных технологий, нужно передать в нее скрытый визуально текст через стандартное свойство aria-label, который сможет прочитать скринридер.

<ModalOutsideButton aria-label="Больше" onClick={() => {}}>
  <Icon20More />
</ModalOutsideButton>

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

Свойство	Описание
`activated`	`boolean` Позволяет управлять `activated`-состоянием извне. По умолчанию: `-`
`activeClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`aria-label`	`string` Текст для скринридера. По умолчанию: `-`
`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`. По умолчанию: `-`
`children`	`ReactNode` Рекомендуется использовать иконки размером `20px`. По умолчанию: `-`
`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. По умолчанию: `-`
`unlockParentHover`	`boolean` Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент. Присваивается дочернему компоненту. По умолчанию: `-`

ModalDismissButton

ModalPage