GridAvatar

Компонент для отображения нескольких аватаров в виде сетки. Поддерживает от 1 до 4 элементов.

Использование

Передавайте массив ссылок на изображения в свойство src:

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

Особенности отображения:

1 элемент — занимает всю область;
2 элемента — области поделены на половину;
3 элемента — один элемент занимает половину, два остальных по четверти;
4 элемента — занимают равные четверти.

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

Добавление индикатора

Используйте подкомпонент Badge для индикаторов:

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

Важные ограничения

Передавайте минимум 1 элемент в массиве src.
Передавайте максимум 4 элемента (лишние игнорируются).

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

GridAvatar

Свойство	Описание
`elementTiming`	`string` Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming ↗. По умолчанию: `-`
`filter`	`Filter` Пользовательское значения стиля filter Подробнее можно почитать в документации ↗. По умолчанию: `-`
`getRef`	`Ref<HTMLImageElement>` По умолчанию: `-`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`heightSize`	`string \| number` Высота изображения. По умолчанию: `-`
`keepAspectRatio`	`boolean` Флаг для сохранения пропорций картинки. Для корректной работы необходимо задать размеры хотя бы одной стороны картинки. По умолчанию: `-`
`noBorder`	`boolean` Отключает обводку. По умолчанию: `-`
`objectFit`	`ObjectFit` Пользовательское значения стиля object-fit Подробнее можно почитать в документации ↗. По умолчанию: `-`
`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`
`src`	`string[]` Массив со ссылками. От 1 до 4 элементов. По умолчанию: `[]`
`widthSize`	`string \| number` Ширина изображения. По умолчанию: `-`
`withTransparentBackground`	`boolean` Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью. По умолчанию: `-`

GridAvatar.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>

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

Gallery

HorizontalCell