Аватар
Аватар показывает, кому или чему что-то принадлежит: фото или инициалы на цветном фоне.
<tk-avatar shape="circle" name="Mira Petrova"></tk-avatar> <tk-avatar name="Acme Corp"></tk-avatar>
Анатомия
| Часть | Что это |
|---|---|
tk-avatar |
рамка: круг или скруглённый квадрат |
| изображение | фото из src с тонкой внутренней рамкой |
| инициалы | белые буквы из name на цветном фоне |
слот badge |
Форма
<tk-avatar shape="circle" name="Mira Petrova"></tk-avatar> <tk-avatar name="Acme Corp"></tk-avatar> <tk-avatar name="Release bot"></tk-avatar>
circle: только живые люди.square(по умолчанию): всё остальное: организации, рабочие пространства, команды, продукты и боты, даже бот с именем и лицом.
Одна форма для одного вида сущностей во всём продукте.
Размеры
<tk-avatar name="Mira Petrova" size="20"></tk-avatar> <tk-avatar name="Mira Petrova" size="24"></tk-avatar> <tk-avatar name="Mira Petrova"></tk-avatar> <tk-avatar name="Mira Petrova" size="40"></tk-avatar> <tk-avatar name="Mira Petrova" size="48"></tk-avatar> <tk-avatar name="Mira Petrova" size="64"></tk-avatar>
size |
Угол квадрата | Инициалы | Где обычно |
|---|---|---|---|
20 |
radius-4 |
одна буква, 12px | в строке текста |
24 |
radius-4 |
12px | плотные списки, ячейки таблиц |
32 (по умолчанию) |
radius-8 |
14px | строки списков, комментарии |
40 |
radius-8 |
16px | карточки, шапки |
48 |
radius-8 |
18px | шапки страниц |
64 |
radius-12 |
24px | профили |
Изображение и инициалы
<tk-avatar shape="circle" src="/photos/mira.jpg" name="Mira Petrova"></tk-avatar>
Аватар никогда не бывает пустым:
- Изображение, если
srcзагрузился. Если загрузка не удалась, аватар сам переходит к следующему варианту. - Инициалы, если изображения нет: первые буквы первого и последнего слова
name(«Mira Petrova» даёт MP). - Только фон, если нет ни изображения, ни
name.
Цвет
<tk-avatar name="Design team" color="purple"></tk-avatar> <tk-avatar name="Support team" color="teal"></tk-avatar>
Фон — один из двенадцати цветов: blue, indigo, red, orange, yellow, green,
mint, teal, cyan, purple, pink, brown. Без color цвет выбирается по имени, и
одно и то же имя всегда получает один цвет. Фоны одинаковы во всех темах.
Бейдж
<tk-avatar shape="circle" name="Mira Petrova"> <tk-badge slot="badge" dot tone="success" label="Online"></tk-badge> </tk-avatar> <tk-avatar size="48" name="Acme Corp"> <tk-badge slot="badge" tone="error" treatment="solid" count="4" label="4 incidents"></tk-badge> </tk-avatar>
- Бейдж с
countвстаёт в верхний угол, для уведомлений. Точка или бейдж с текстом — в нижний, для статуса присутствия. Угол выбирает сам аватар. - Один бейдж на аватар. Точка подходит для размеров от 24 до 48, счётчик читается от 40.
- Вокруг бейджа кольцо 2px цвета страницы. Если фон не
surface/default, перекрасьте кольцо. - Внутри
Avatar group бейджи скрыты.
Когда использовать
- Аватар показывает человека или организацию: в строках списка, комментариях, карточках, полях исполнителя.
- Держите имя текстом рядом. Одно фото узнают не все.
- Чтобы аватар нажимался, положите его в кнопку или ссылку. Сам аватар фокус не получает.
- Для нескольких людей в ряд берите
Avatar group .
Можно / нельзя
| ✅ Можно | ❌ Нельзя |
|---|---|
| Круг для человека, написавшего комментарий | Круг для рабочего пространства, потому что так дружелюбнее |
| Квадрат для бота, даже с изображением лица | Круг для бота, чтобы он казался человеком |
Без label рядом с видимым именем |
label рядом с тем же именем: оно прозвучит дважды |
label, когда аватар стоит один |
Аватары без имени в ряд, которые скринридер не озвучит |
| Пусть аватар сам справляется с отсутствием фото | Прятать аватар или собирать инициалы вручную |
| Счётчик на аватаре размером от 40 | Счётчик на крошечном аватаре или счётчик и точка на одном |
Связанные
Avatar group : аватары внахлёст с переполнением «+N».Badge : индикатор в углу.
API
Атрибуты
| Атрибут | Тип | По умолчанию | Что делает |
|---|---|---|---|
shape |
square | circle |
square |
circle только для живых людей |
size |
20 | 24 | 32 | 40 | 48 | 64 |
32 |
ширина и высота в px |
src |
string | адрес изображения | |
name |
string | откуда берутся инициалы и цвет; скринридер его не читает | |
color |
один из двенадцати цветов | по name |
цвет фона |
label |
string | озвучивает аватар с этим именем; без него аватар скрыт от скринридеров |
Слоты
| Слот | Содержимое |
|---|---|
badge |
один tk-badge |
События
Нет.
Токены
| Элемент | Токены |
|---|---|
| угол квадрата | radius-4, radius-8, radius-12 по размеру |
| круг | radius-full |
| фон | примитивы {color}-900, -800, -700, -500, -50, одинаковые во всех темах |
| инициалы | white, font-weight-medium, от font-size-xs до font-size-2xl по размеру |
| рамка изображения | border/subtle |
| кольцо бейджа | surface/default |
Доступность
Встроено:
- Без
labelаватар скрыт от скринридеров: обычно он стоит рядом с видимым именем. - С
labelаватар — изображение с этим именем. nameникогда не зачитывается, поэтому ничего не звучит дважды.
На вашей стороне:
- Задайте
label, когда только аватар говорит, кто это, например в панели из одних аватаров. Обычно он совпадает сname. - Не задавайте
labelрядом с тем же видимым именем. - Скрытый аватар скрывает и свой бейдж. Назовите статус текстом рядом или в
label: «Mira Petrova, online». - Фото — ваш контент, контраст для него не гарантирован. Не полагайтесь только на изображение.