Компонент Avatars
Компонент avatars используется для отображения аватаров пользователей, логотипов или других графических элементов, которые могут быть представлены в виде круга или квадрата. Аватары могут быть разных размеров, цветов и стилей, а также могут включать дополнительные элементы, такие как иконки, статусы или подписи.
Назначение компонента:
- Отображение аватаров пользователей.
- Отображение логотипов или иконок.
- Поддержка различных размеров и стилей.
- Поддержка групповых аватаров (avatar group) и аватаров с подписями (avatar label).
Основные классы и их назначение:
.sf-avatar-cir— базовый класс для круглого аватара..sf-avatar-cir-green— класс для аватара с зеленым фоном (например, для статуса онлайн)..sf-avatar--logo— класс для аватара с логотипом..sf-avatar-check— класс для аватара с иконкой галочки (например, для подтверждения)..sf-avatar--add— класс для кнопки добавления аватара..sf-avatar-round— класс для круглого аватара с изображением..sf-avatar-group— класс для группы аватаров..sf-avatar-label— класс для аватара с текстовой подписью..sf-avatar-profile— класс для аватара профиля с возможностью добавления статуса.
Таблица переменных:
| Название переменной | Значение по умолчанию | Назначение |
|---|---|---|
| --sf-avatar--circle--background-color | var(--sf-surface-3) | Цвет фона круглого аватара |
| --sf-avatar--circle--diameter | var(--sf-b2) | Диаметр круглого аватара |
| --sf-avatar-check--background-color | var(--sf-primary) | Цвет фона аватара с галочкой |
| --sf-avatar-check--diameter | var(--sf-b6) | Диаметр аватара с галочкой |
| --sf-avatar--add--diameter | var(--sf-c6) | Диаметр кнопки добавления аватара |
| --sf-avatar--add--font-size | var(--sf-b6) | Размер шрифта для иконки добавления |
| --sf-avatar--add--background-color | transparent | Цвет фона кнопки добавления |
| --sf-avatar--add--color | var(--sf-on-surface) | Цвет иконки добавления |
| --sf-avatar--image-size | var(--sf-d0) | Размер изображения аватара |
| --sf-avatar--icon--font-size | var(--sf-text--height-1) | Размер шрифта для иконки аватара |
| --sf-avatar-group--margin-left | calc(var(--sf-b5)*-1) | Отступ между аватарами в группе |
| --sf-avatar-label--font-size | var(--sf-text--size-1) | Размер шрифта для подписи аватара |
| --sf-avatar-label--line-height | var(--sf-text--height-1) | Высота строки для подписи аватара |
| --sf-avatar-label--gap | var(--sf-b2) | Отступ между аватаром и подписью |
| --sf-avatar-profile--size | var(--sf-e2) | Размер аватара профиля |
Пример использования:
Olivia Rhye
link
Source
Круглый аватар
Круглый аватар с значком статуса
Круглый аватар с чекмарком
Пустой аватар
Пустой аватар с значком статуса
Группа аватаров различных размеров
Аватары с лэйблом
Olivia Rhye
olivia@simai.io
Olivia Rhye
olivia@simai.io
Olivia Rhye
olivia@simai.io
Olivia Rhye
olivia@simai.io