Отображение данных
Аватар
Опознавательный знак человека или агента: изображение либо инициалы.
ИС
АП
МК
Разметка
<span class="inst-avatar">ИС</span>
<span class="inst-avatar">АП</span>
<span class="inst-avatar">МК</span>
Контракт
| Что | Обязательно | Почему |
|---|---|---|
aria-hidden="true", если имя есть рядом текстом |
да | Иначе аватар озвучится как «И С» рядом с уже прочитанным именем |
alt или aria-label, если имени рядом нет |
да | Инициалы доступным именем не являются: скринридер читает их по буквам |
aria-label на группе — составом или числом |
да, у inst-avatars |
«7 участников» вместо череды инициалов |
Доступность
| Аватар — не подпись | Если имя есть рядом текстом, аватар декоративен: aria-hidden="true". Иначе он озвучится как «И С» рядом с уже прочитанным именем |
| Аватар вместо подписи | Тогда он несёт имя: <img alt="Иннокентий Соколов"> или aria-label на контейнере |
| Инициалы | Не являются доступным именем: «ИС» скринридер прочитает по буквам |
| Группа | Дайте контейнеру aria-label с полным составом или числом: «7 участников». Иначе прозвучит череда инициалов |
| Счётчик | inst-avatars-more содержит «+4» текстом — это данные, а не декорация |
| Контраст | Инициалы берут --text-secondary на --surface-sunken и держат 4.5:1 в пяти темах |
Размеры
W1
ИС
B4
Разметка
<span class="inst-avatar inst-avatar--sm">W1</span>
<span class="inst-avatar">ИС</span>
<span class="inst-avatar inst-avatar--lg">B4</span>
Размеры берутся из яруса ролей (--control-h-*), поэтому аватар и стоящая
рядом кнопка того же размера физически не могут
разойтись по высоте.
Композиции
Группа с наложением
ИС
АП
МК
+4
Разметка
<span class="inst-avatars" aria-label="7 участников">
<span class="inst-avatar">ИС</span>
<span class="inst-avatar">АП</span>
<span class="inst-avatar">МК</span>
<span class="inst-avatars-more">+4</span>
</span>
Кольцо вокруг каждого аватара в группе — не обводка, а цвет поверхности под ним: оно отделяет соседей друг от друга. На другой поверхности группа потребует переопределить это кольцо, иначе появится ореол.
API
| Имя | Что делает |
|---|---|
| класс | |
inst-avatar | Один аватар. Размер --control-h-md |
inst-avatars | Группа с наложением |
inst-avatars-more | Счётчик «ещё N» в конце группы |
| модификатор | |
inst-avatar--sm | Размер |
inst-avatar--lg | Размер |
| Имя | Значение | Откуда |
|---|---|---|
| токен | ||
--control-h-sm/md/lg | — | одно на все ячейки |
--radius-full | 999px | одно на все ячейки |
--surface-sunken | light-dark(var(--n-2), var(--n-14)) | база +1: тема |
--surface-raised | light-dark(var(--n-0), var(--n-12)) | база +1: тема |
--text-xs | 0.78125rem | база +4: масштаб |
--weight-medium | 600 | одно на все ячейки |
--size-marker | 2px | база +4: масштаб |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument