Компонент 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>

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