Avatar
The Avatar widget is used to represent users or entities, typically displaying profile pictures or initials. It provides a flexible way to show either image content or text within different shape containers, making it perfect for user profiles, contact lists, and user identification throughout your application.
The Avatar widget automatically handles different content types and shapes, ensuring consistent presentation across your interface.
Avatar Properties
Child to Show
Determines the content type displayed in the avatar. Options are Text
for initials/text or Image
for profile pictures.
Content Types
The Avatar widget supports two content types, each with its own comprehensive property set:
Text Content
When Child to Show is set to Text, the avatar displays text content (typically user initials). All text properties are available for customization.
For complete text styling options, see the Text documentation.
Image Content
When Child to Show is set to Image, the avatar displays image content (typically profile pictures). All image properties are available for customization.
For complete image configuration options, see the Image documentation.
Shape Properties
Shape
Defines the avatar's geometric shape. Options are Circle
for round avatars or Square
for rectangular avatars.
Background Color
The background color of the avatar container, visible behind transparent images or as the background for text content.
Circle Shape Properties
When Shape is set to Circle, the following property is available:
Radius (Circle)
Controls the size of the circular avatar by setting the radius in pixels.
Square Shape Properties
When Shape is set to Square, the following properties are available:
Side (Square)
Controls the size of the square avatar by setting the side length in pixels.
Corner Radius (Square)
Rounds the corners of the square avatar. Can be set individually for each corner to create custom shapes.
Default Properties
The Avatar widget supports only Layout and Interactions sections of Default Properties.
Last updated