UsersStack
Компонент для отображения группы аватаров пользователей с возможностью добавления сопроводительного текста. Оптимален для визуализации участников чата, подписчиков или коллаборативной работы.
Использование
Для отображения аватаров передавайте ссылки на изображения в свойство photos, которое принимает массив ссылок.
Дополнительно есть возможность передать массив объектов, каждый объект состоит также из ссылки на изображение и
пользовательского компонента-обёртки для каждого элемента.
Положение аватаров
Помимо положения аватаров перед или после текста (avatarsPosition="inline-start" и avatarsPosition="inline-end" соответственно),
есть возможность задать блочное расположение - аватары над текстом (avatarsPosition="block-start").
В таком случае оптимальным будет совместное использование со свойством size="m":
Счётчик
Если в свойство photos передаётся количество элементов большее, чем указано в свойстве visibleCount,
то рядом с аватарами появляется счётчик, который по умолчанию отображает количество оставшихся элементов.
С помощью числового свойства count можно переопределить число, которое будет показано.
Если число окажется больше 99, то счётчик скрывается.
Пример можно увидеть в разделе Положение аватаров.
Кастомизация аватаров
Аватарки можно оборачивать в кастомный компонент для добавления дополнительного функционала
с помощью свойства renderWrapper у элемента списка photos. В примере ниже при наведении на
аватар появляется подсказка с именем пользователя:
Ограничения
- Максимальное число в счётчике: 99, иначе счётчик скрывается.
- При
size="s"счётчик не отображается. - Рекомендуется использовать
avatarsPosition="block-start"вместе сsize="m".
Свойства и методы
| Свойство | Описание |
|---|---|
avatarsPosition | "inline-start" | "block-start" | "inline-end"Определяет положение аватаров
Режим По умолчанию: inline-start |
count | numberЧисло, которое будет указано в счетчике.
По умолчанию высчитывается по формуле По умолчанию: Math.max(0, photos.length - visibleCount) |
getRootRef | Ref<HTMLDivElement>По умолчанию: - |
photos | string[] | UsersStackPhoto[]Массив ссылок на фотографии либо массив структур типа По умолчанию: [] |
size | "s" | "m" | "l"Размер аватарок. По умолчанию: m |
visibleCount | numberКоличество аватарок, которые будут показаны.
Если в массиве По умолчанию: 3 |