Avatars

<sf-avatars> собирает из аватаров готовые сочетания: человек с источником, группа с остатком, аватар с двумя строками подписи, аватар профиля. Для одного аватара, аватара с подписью и карточки берите Avatar — у него есть имя для экранного диктора и полный набор размеров.

Пример

<div class="flex flex-col gap-3">
  <sf-avatars template="user" name="Анна Белова" source="simai.ru"></sf-avatars>
  <sf-avatars template="user" name="Иван Петров" source="docs.simai.ru"></sf-avatars>
</div>

Применение

Шаблоны

template выбирает сочетание:

• user — изображение из image-url, имя из name и источник из source со значком ссылки;
• group — ряд аватаров из avatars и счётчик остатка из avatars-more;
• label — аватар из avatar-url с двумя строками: label-text и label-second-text;
• profile — изображение профиля с отметкой проверки;
• default — один аватар из image-url; active добавляет точку присутствия, check — отметку.

Данные одним атрибутом

Значения можно передать по одному атрибуту или целиком: data принимает JSON с теми же полями в camelCase или snake_case (imageUrl, label_text, avatars), property — JSON с размерами (roundSize, labelSize, profileSize). Атрибут сильнее поля из JSON. Размеры принимают ступени шкалы (1/4, 1/3, 1/2, 2, 3) или имена tiny, small, big, extra_big.

<sf-avatars template="group"
  avatars='[{"imageUrl": "/team/anna.jpg"}, {"imageUrl": "/team/ivan.jpg"}]'
  avatars-more="5"></sf-avatars>

Оформление

Шаблоны default, group, label и profile пишут классы sf-avatar-round, sf-avatar--image, sf-avatar-cir, sf-avatar-check, sf-avatar-profile, которых нет в таблицах стилей выпуска: аватары в них выводятся без формы и размера. Шаблон user выводит изображение и текст обычной разметкой. Одиночный аватар и аватар с подписью стройте на <sf-avatar>.

Доступность

• Изображения во всех шаблонах декоративны (alt=""): человека называет видимый текст — name в шаблоне user, label-text в шаблоне label.
• Аватары шаблонов default, group и label — кнопки без доступного имени, и задать его атрибутом нельзя. Если аватар должен открывать профиль, используйте <sf-avatar> с aria-label.
• Счётчик остатка в шаблоне group — текст кнопки; рядом с группой сообщите словами, сколько участников всего.

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.

Атрибуты

• template — string, по умолчанию default.
• data — string, по умолчанию пусто.
• property — string, по умолчанию пусто.
• image-url — string, по умолчанию пусто.
• avatar-url — string, по умолчанию пусто.
• avatar-size — string, по умолчанию пусто.
• active — boolean, по умолчанию false.
• check — boolean, по умолчанию false.
• name — string, по умолчанию пусто.
• source — string, по умолчанию пусто.
• label-text — string, по умолчанию пусто.
• label-second-text — string, по умолчанию пусто.
• avatars — array, по умолчанию [].
• avatars-more — string, по умолчанию пусто.
• round-size — string, по умолчанию пусто.
• label-size — string, по умолчанию пусто.
• profile-size — string, по умолчанию пусто.
• root-class — string, по умолчанию пусто.

Методы

Публичных методов нет.

События

Своих событий нет; общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

Доступность

• Доступное имя: внутренний.
• Фокус: Здесь ничто не получает фокус: каждый аватар — декоративное изображение (alt “”), а человека называет видимый текст — имя в user, label-text в label. Аватар, открывающий профиль, — это sf-avatar с aria-label внутри собственной ссылки или кнопки хоста.

Минимальная разметка

<sf-avatars></sf-avatars>

Источник

• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/avatars
• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-avatars

См. также

• Avatar — один аватар с именем, состоянием и подписью.
• Аватары — аватары на классах.