Avatar

<sf-avatar> показывает одного человека или одну организацию: фотографию, инициалы или значок-заполнитель, при необходимости — состояние в сети или отметку проверенного профиля. Элемент строится на классах компонента Аватары; для готовых сочетаний аватаров со ссылкой или группой есть Avatars.

Пример

<div class="flex flex-col gap-4">
  <div class="flex flex-wrap gap-3 items-cross-center">
    <sf-avatar text="АБ" aria-label="Анна Белова"></sf-avatar>
    <sf-avatar title="Иван Петров" aria-label="Иван Петров"></sf-avatar>
    <sf-avatar status="online" text="МК" aria-label="Мария Козлова, в сети"></sf-avatar>
    <sf-avatar status="verified" text="ОС" aria-label="Олег Смирнов, подтверждённый профиль"></sf-avatar>
  </div>
  <sf-avatar template="label" title="Анна Белова" description="Дизайнер интерфейсов" aria-label="Анна Белова"></sf-avatar>
</div>

Применение

Что показывает аватар

Содержимое выбирается по порядку: изображение из image-url, затем текст из text, затем инициалы, которые компонент берёт из title или из явно заданного aria-label. Если нет ничего из этого, показывается значок человека. Изображение декоративно: имя человека передаёт aria-label, а не альтернативный текст картинки.

Шаблоны

template выбирает раскладку:

• default — один аватар;
• label — аватар с подписью: title — имя, description — вторая строка. no-wrap обрезает обе строки многоточием вместо переноса;
• card — карточка: изображение, title и строка meta (или description) со значком meta-icon. card-variant задаёт пропорции изображения: square или portrait, а image-alt — его альтернативный текст.

Размер и форма

size выбирает ступень от 1/4 до 3 (по умолчанию 1). Рядом с подписью в строке или в ячейке таблицы задайте line со значением 1/2, 1 или 2: аватар займёт строку текста этого размера формы, и строка не станет выше. shape="square" делает аватар квадратным — для организаций и проектов.

Состояние

status добавляет индикатор в углу аватара: online и offline — точка присутствия, company и verified — значок организации и проверенного профиля. Индикатор декоративный, поэтому называйте состояние и в aria-label. Слоты online-indicator, company-badge и verified-badge заменяют соответствующий значок своим.

Нажатие и создание из скрипта

В шаблонах default и label аватар — нативная кнопка. Своих событий у элемента нет: открытие профиля или меню повесьте на обычный click. disabled выключает кнопку.

const avatar = await SF.createAsync('avatar', {
  text: 'АБ',
  ariaLabel: 'Анна Белова',
  status: 'online',
});
document.querySelector('.team').append(avatar);
avatar.addEventListener('click', () => openProfile('anna'));

Доступность

• Аватар в шаблонах default и label — кнопка в порядке Tab. Задайте ей aria-label с именем человека; без него кнопка называется «Аватар» на русской странице и «Avatar» на остальных, а такое имя ничего не сообщает.
• Изображение и значки состояния скрыты от экранного диктора. Если состояние важно, включите его в имя: «Мария Козлова, в сети».
• В шаблоне label видимое имя в title и aria-label кнопки дублируют друг друга по смыслу — так и должно быть: кнопка получает имя, подпись остаётся текстом рядом.
• В шаблоне card кнопки нет; альтернативный текст изображения задаёт image-alt.

Справочник API

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

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

Атрибуты

• template — string, по умолчанию default.
• size — string, по умолчанию 1, значения: 1/4, 1/3, 1/2, 1, 2, 3.
• line — string, по умолчанию пусто, значения: пусто, 1/2, 1, 2. Занимает строку текста этого размера формы вместо высоты элемента управления — для аватара рядом с подписью в строке или ячейке таблицы.
• shape — string, по умолчанию circle, значения: circle, square.
• image-url — string, по умолчанию пусто.
• image-alt — string, по умолчанию пусто.
• no-wrap — boolean, по умолчанию false.
• text — string, по умолчанию пусто.
• status — string, по умолчанию none, значения: none, online, offline, company, verified.
• aria-label — string, по умолчанию пусто. Пусто — текст на языке страницы (по-английски «Avatar»).
• title — string, по умолчанию пусто.
• description — string, по умолчанию пусто.
• meta — string, по умолчанию пусто.
• meta-icon — string, по умолчанию пусто.
• card-variant — string, по умолчанию square, значения: square, portrait.
• disabled — boolean, по умолчанию false.

Прежние имена:

Методы

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

События

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

Доступность

• Доступное имя: рекомендуется.
• Клавиши: Tab.
• Фокус: Сохраняет видимый фокус на активном элементе управления.

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

<sf-avatar></sf-avatar>

Источник

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

См. также

• Аватары — тот же вид на классах, без Smart-элемента.
• Avatars — готовые сочетания аватаров.