Image

Компонент для отображения изображений с поддержкой адаптивных размеров, скруглений и позиционированных элементов. Наследует все свойства HTML-элемента <img>. Главное отличие от ImageBase заключается в поддержке скруглений, определённых дизайн-системой и позиционирование индикаторов в зависимости от размеров.

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

Свойство	Описание
`borderEndEndRadius`	`"s" \| "m" \| "l"` Размер закругления угла между сторонами конца блока и строки. По умолчанию: `-`
`borderEndStartRadius`	`"s" \| "m" \| "l"` Размер закругления угла между стороной конца блока и стороной начала строки. По умолчанию: `-`
`borderRadius`	`"s" \| "m" \| "l"` Размер закругления. По умолчанию: `m`
`borderStartEndRadius`	`"s" \| "m" \| "l"` Размер закругления угла между стороной начала блока и стороной конца строки. По умолчанию: `-`
`borderStartStartRadius`	`"s" \| "m" \| "l"` Размер закругления угла между сторонами начала блока и строки. По умолчанию: `-`
`elementTiming`	`string` Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming ↗. По умолчанию: `-`
`fallbackIcon`	`ReactElement<ImageBaseExpectedIconProps, string \| JSXElementConstructor<any>>` Фолбек на случай, если картинка не прогрузилась. 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`. Предпочтительней использовать иконки из `@vkontakte/icons`. 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы использовали иконку. ⚠️ Может перекрывать `children`. По умолчанию: `-`
`filter`	`Filter` Пользовательское значения стиля filter Подробнее можно почитать в документации ↗. По умолчанию: `-`
`getRef`	`Ref<HTMLImageElement>` По умолчанию: `-`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`heightSize`	`string \| number` Высота изображения. По умолчанию: `-`
`keepAspectRatio`	`boolean` Флаг для сохранения пропорций картинки. Для корректной работы необходимо задать размеры хотя бы одной стороны картинки. По умолчанию: `-`
`noBorder`	`boolean` Отключает обводку. По умолчанию: `-`
`objectFit`	`ObjectFit` Пользовательское значения стиля object-fit Подробнее можно почитать в документации ↗. По умолчанию: `cover`
`objectPosition`	`ObjectPosition<string \| number>` Пользовательское значения стиля object-position Подробнее можно почитать в документации ↗. По умолчанию: `-`
`size`	`LiteralUnion<16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 44 \| 48 \| 56 \| 64 \| 72 \| 80 \| 88 \| 96, number>` Задаёт размер картинки. Используйте размеры заданные дизайн-системой `16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 44 \| 48 \| 56 \| 64 \| 72 \| 80 \| 88 \| 96`. ⚠️ Использование кастомного размера – это пограничный кейс. По умолчанию: `48`
`widthSize`	`string \| number` Ширина изображения. По умолчанию: `-`
`withTransparentBackground`	`boolean` Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью. По умолчанию: `-`

Image.Badge

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

Свойство	Описание
`background`	`"stroke" \| "shadow"` Вид подложки под иконку. `"stroke"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг). `"shadow"` – добавляет небольшую тень. По умолчанию: `-`
`children`	`ReactElement<ImageBaseExpectedIconProps, string \| JSXElementConstructor<any>>` Принимает иконку. 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`. Предпочтительней использовать иконки из `@vkontakte/icons`. 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы использовали иконку. По умолчанию: `-`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`

background

"stroke" | "shadow"

Вид подложки под иконку.

"stroke" – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).
"shadow" – добавляет небольшую тень.

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

children

ReactElement<ImageBaseExpectedIconProps, string | JSXElementConstructor<any>>

Принимает иконку.

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

getRootRef

Ref<HTMLDivElement>

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

Image.Overlay

Свойство	Описание
`children`	`ReactNode \| ReactElement<ImageBaseExpectedIconProps, string \| JSXElementConstructor<any>>` Принимает иконку. 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`. Предпочтительней использовать иконки из `@vkontakte/icons`. 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы использовали иконку. Содержимое. По умолчанию: `-`
`className`	`string` `className` для компонента. По умолчанию: `-`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`onClick`	`MouseEventHandler<HTMLElement>` Обработчик взаимодействия с элементом. По умолчанию сам компонент является интерактивным элементом. Передав значение равное `'undefined'` или не передав этот параметр вовсе, можно отключить такое поведение, что дает возможность передавать отдельные интерактивные элементы в `children`. По умолчанию: `-`
`theme`	`"dark" \| "light"` Задаёт тему оформления. По умолчанию берётся из параметра `appearance` в `ConfigProvider`. По умолчанию: `-`
`visibility`	`"on-hover" \| "always"` Определяет каким образом должен показываться оверлей. `"on-hover"` – на наведение указателя мыши. `"always"` – всегда показывать. По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет. Определение просиходит с помощью двойного рендера, так что на устройствах без мыши оверлей покажется не раньше второго рендера. Если это критично (например при SSR), то старайтесь явно указывать значение `visibility`, либо используйте AdaptivityProvider для того, чтобы явно определить `hasPointer`. По умолчанию: `-`

Image.FloatElement

Свойство	Описание
`blockIndent`	`FloatElementIndentation` Отступ компонента от края контейнера по вертикали. По умолчанию: `-`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`inlineIndent`	`FloatElementIndentation` Отступ компонента от края контейнера по горизонтали. По умолчанию: `-`
`placement`	`FloatElementPlacement` Позиция компонента относительно родителя. По умолчанию: `-`
`visibility`	`"on-hover" \| "always"` Режим отображения компонента: `"always"`: Всегда `"on-hover"`: При наведении на картинку. По умолчанию: `always`

HorizontalScroll

ImageBase

Image

Адаптивные размеры

Скругления

Единое скругление

Индивидуальные углы

Дополнительные элементы

Иконка-заглушка

Индикатор

Наложение

Позиционированный компонент

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

Image

Image.Badge

Image.Overlay

Image.FloatElement