Компонент Avatars

Компонент avatars используется для отображения аватаров пользователей, логотипов или других графических элементов, которые могут быть представлены в виде круга или квадрата. Аватары могут быть разных размеров, цветов и стилей, а также могут включать дополнительные элементы, такие как иконки, статусы или подписи.

Назначение компонента:

Отображение аватаров пользователей.
Отображение логотипов или иконок.
Поддержка различных размеров и стилей.
Поддержка групповых аватаров (avatar group) и аватаров с подписями (avatar label).

Параметры компонента:

Основные параметры компонента avatars связаны с размерами.

round_size - размер стандартного аватара. Принимает значения:
- tiny - наименьший размер
- extra_small
- small
- tiny
- big
- extra_big - наибольший размер
label_size- размер аватара с текстом. Принимает значения:
- small- наименьший размер
- big
- extra_big - наибольший размер
profile_size - размер аватара профиля. Принимает значения:
- small- наименьший размер
- extra_big - наибольший размер

Шаблоны компонента:

group - шаблон группы аватаров
label - шаблон аватара с подписью
profile - шаблон автара профиля
user - шаблон аватара пользователя

Данные компонента:

imageUrl - ссылка на изображение. В случае шаблона group, данные передаются в виде JSON-массива ([ {"imageUrl": link_to_your_image}, {"imageUrl": link_to_your_image_2}, {"imageUrl": link_to_your_image_3} ])
active - отображение состояния active в виде зеленого кружка (для стандартного шаблона)
check - отображение значка верификации (для стандартного шаблона)
check - отображение значка верификации (для стандартного шаблона)

Пример использования:

                    
<smart
name="avatars"
sf-code="avatars"
property = '{"round_size": "big"}'
template = "default"
data='{"imageUrl": "https://img.freepik.com/premium-photo/realistic-3d-model-disney-character-trixie-with-glasses-red-hair_899449-104975.jpg",
        "active": "true"}'
>
</smart>

                    
<smart
name="avatars"
sf-code="avatars"
template = "user"
property = '{"styles": "regular"}'
data='{"imageUrl": "https://img.freepik.com/premium-photo/realistic-3d-model-disney-character-trixie-with-glasses-red-hair_899449-104975.jpg",
"name":"Olivia Rhye", "source": "Source"}'
>
</smart>

                    
<smart
name="avatars"
sf-code="avatars"
property = '{"round_size": "extra_big"}'
template = "default"
data='{"imageUrl": "https://img.freepik.com/premium-photo/realistic-3d-model-disney-character-trixie-with-glasses-red-hair_899449-104975.jpg",
    "check": "true"}'
>
</smart>

                    
<smart
name="avatars"
sf-code="avatars"
property = '{"round_size": "extra_big"}'
template = "group"
data='{
        "avatars": 
        [
        {"imageUrl": "https://img.freepik.com/premium-photo/realistic-3d-model-disney-character-trixie-with-glasses-red-hair_899449-104975.jpg"},
        {"imageUrl": "https://img.freepik.com/premium-photo/realistic-3d-model-disney-character-trixie-with-glasses-red-hair_899449-104975.jpg"},
        {"imageUrl": "https://img.freepik.com/premium-photo/realistic-3d-model-disney-character-trixie-with-glasses-red-hair_899449-104975.jpg"},
        {"imageUrl": "https://img.freepik.com/premium-photo/realistic-3d-model-disney-character-trixie-with-glasses-red-hair_899449-104975.jpg"}
        ]
    }'
>
</smart>

                    
<smart
name="avatars"
sf-code="avatars"
property = '{"label_size": "extra_big"}'
template = "label"
data='{"avatarUrl": "https://img.freepik.com/premium-photo/realistic-3d-model-disney-character-trixie-with-glasses-red-hair_899449-104975.jpg",
"avatarSize":"extra_big",
"labelText":"Olivia Rhye",
"labelSecondText":"olivia@simai.io"}'>
</smart>

                    
<smart
name="avatars"
sf-code="avatars"
property = '{"profile_size": "big"}'
template = "profile"
data='{"imageUrl": "https://img.freepik.com/premium-photo/realistic-3d-model-disney-character-trixie-with-glasses-red-hair_899449-104975.jpg"
    }'>
</smart>

Изменить статью