Avatar & Avatar Group

🧑‍💼 Avatar & Avatar Group Components in Lowcoder

Lowcoder provides versatile components for displaying user avatars, enhancing user interfaces with visual representations of individuals or groups.

🧍 Avatar Component

The Avatar component displays a single user's image, initials, or icon, commonly used to represent user profiles or identities within the application.

🔧 Key Features

• Image Display: Supports displaying user profile pictures.

• Initials Fallback: Automatically displays user initials when an image is not provided.

• Icon Support: Allows the use of icons as avatars.

• Customisable Size and Shape: Adjust the avatar's size and shape (e.g., circle, square) to fit the application's design.

🛠 Configuration Options

• Image Source: Set the URL of the user's profile picture.

• Fallback Text: Define the text to display when the image is unavailable.

• Icon Selection: Choose an icon to represent the user.

• Size Settings: Specify the avatar's dimensions.

• Shape Selection: Choose between circular or square avatars.

⚙️ Integration Tips

• Dynamic Binding: Bind the avatar's image source to user data dynamically.

• Event Handling: Implement event handlers to respond to user interactions with the avatar.

Components Playground

On Component Playground, you can interact with the Avatar component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Avatar component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Components Auto-Docs

In the Auto-Docs of Avatar component, we have shown how to use different properties of the Avatar component. It also includes the Styling properties of the Avatar component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Properties of the Avatar Component

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name	Type	Description
hidden	Boolean	Returns True or False based on whether the Avatar component is hidden or not
badgeCount	Number	Returns Number which contains the badge count

Events

Events give you the ability to trigger further actions (with Event-Handlers).

Event Name	Description
Click	Triggers, when a User "Clicks" on the Component

Methods

You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.

setTitle() :

avatar1.setTitle() method sets the Avatar's Title property, which sets the Title of the Avatar component.

avatar1.setTitle("Avatar Title");

clearTitle() :

avatar1.clearTitle() clears the Avatar's Title property and empties the Title value from the Avatar component.

avatar1.clearTitle();

resetTitle() :

avatar1.resetTitle() method resets the Avatar's Title property to the default value of the Avatar component.

avatar1.resetTitle();

setSrc() :

avatar1.setSrc() method sets the Avatar's Source property, which takes the URL of the Avatar to be shown in the Avatar component.

avatar1.setSrc("https://i.pravatar.cc/300");

clearSrc() :

avatar1.clearSrc() clears the Avatar's Source property and empties the Source value from the Avatar component.

avatar1.clearSrc();

resetSrc() :

avatar1.resetSrc() method resets the Avatar's Source property to the default value of the Avatar component.

avatar1.resetSrc();

setBadgeCount() :

avatar1.setBadgeCount() method sets the Avatar's Badge Count property, which sets the Badge Count of the Avatar component.

avatar1.setBadgeCount(5)

clearBadgeCount() :

avatar1.clearBadgeCount() clears the Avatar's Badge Count property and empties the Badge Count value from the Avatar component.

avatar1.clearBadgeCount();

resetBadgeCount() :

avatar1.resetBadgeCount() method resets the Avata's Badge Count property to the default value of the Avatar component.

avatar1.resetBadgeCount();

setAvatarCatption() :

avatar1.setAvatarCatption() method sets the Avatar's Caption property, which sets the Caption of the Avatar component.

avatar1.setAvatarCatption("[e-mail]");

clearAvatarCatption() :

avatar1.clearAvatarCatption() clears the Avatar's Caption property and empties the Caption value from the Avatar component.

avatar1.clearAvatarCatption();

resetAvatarCatption() :

avatar1.resetAvatarCatption() method resets the Avatar's Caption property to the default value of the Avatar component.

avatar1.resetAvatarCatption();

setAvatarLabel() :

avatar1.setAvatarLabel() method sets the Avatar's Label property, which sets the Label of the Avatar component.

avatar1.setAvatarLabel("John");

clearAvatarLabel() :

avatar1.clearAvatarLabel() clears the Avatar's Label property and empties the Label value from the Avatar component.

avatar1.clearAvatarLabel();

resetAvatarLabel() :

avatar1.resetTitle() method resets the Avatar's Label property to the default Label value of the Avatar component.

avatar1.resetAvatarLabel();

👥 Avatar Group Component

The Avatar Group component displays a collection of avatars, representing multiple users or entities, often used to show group memberships or participants.

🔧 Key Features

• Multiple Avatars: Display a set of avatars in a compact group.

• Overflow Handling: Automatically handles cases where the number of avatars exceeds the display limit, often showing a "+N" indicator.

• Customisable Layout: Adjust spacing and alignment of avatars within the group.

🛠 Configuration Options

• Data Source: Provide an array of user data to generate avatars.

• Display Limit: Set the maximum number of avatars to display before showing an overflow indicator.

• Spacing Settings: Adjust the spacing between avatars in the group.

• Alignment Options: Align avatars horizontally or vertically as needed.

⚙️ Integration Tips

• Dynamic Data Binding: Bind the avatar group to dynamic user data sources.

• Event Handling: Implement event handlers to respond to interactions with individual avatars within the group.

🎨 Styling and Customisation

Both Avatar and Avatar Group components support extensive styling options to match the application's design requirements. Customize aspects such as:

• Colors: Set background and text colors.

• Borders: Define border styles and colors.

• Shadows: Add shadows for depth effects.

• Hover Effects: Implement visual changes on hover interactions.

Components Playground

On Component Playground, you can interact with the Avatar Group component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Avatar Group component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Components Auto-Docs

In the Auto-Docs of Avatar Group component, we have shown how to use different properties of the Avatar Group component. It also includes the Styling properties of the Avatar Group component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Properties of the Avatar Group Component

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name	Type	Description
hidden	Boolean	Returns True or False based on whether the Avatar Group component is hidden or not
currentAvatar	Object	Returns Object which contains the current Avatar object of the Avatar Group component

Events

Events give you the ability to trigger further actions (with Event-Handlers).

Event Name	Description
Click	Triggers, when a User "Clicks" on the Component
Refresh	Triggers, when Avatar Group component is refreshed