Class AvatarGroup
Groups multiple avatars together in a horizontal layout with configurable spacing and overflow handling.
Implements
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class AvatarGroup : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolderRemarks
The AvatarGroup component is used to group multiple Avatar components together. It's particularly useful for displaying a list of users, team members, or any collection of entities represented by avatars.
The component automatically handles overflow by showing a configurable number of avatars and collapsing the rest into a '+N' indicator.
Note: For optimal visual presentation, it's recommended to keep the max property value between 4 and 6 avatars.
Examples
Basic usage with different variants. Shows 5 circular avatars with medium spacing and '+1' overflow indicator.
<AvatarGroup spacing="M" max="5" variant="Circular">
<Avatar src="user1.png" />
<Avatar src="user2.png" />
<Avatar src="user3.png" />
<Avatar src="user4.png" />
<Avatar src="user5.png" />
<Avatar src="user6.png" />
</AvatarGroup>Data binding example. Dynamically create avatars from a data source with custom binding logic.
var avatarGroup = new AvatarGroup();
avatarGroup.sourceItems = usersList;
avatarGroup.max = 4;
avatarGroup.spacing = AvatarGroupSpacing.S;
avatarGroup.bindItem = (avatar, index) => {
var user = usersList[index];
avatar.src = user.avatarUrl;
avatar.backgroundColor = user.color;
};Custom surplus rendering. Customize the appearance of the overflow indicator.
avatarGroup.renderSurplus = (surplusCount) => {
var surplusAvatar = new Avatar();
surplusAvatar.backgroundColor = new Color(0.2f, 0.2f, 0.2f);
var label = new Text($"+{surplusCount} more");
label.style.color = Color.white;
surplusAvatar.Add(label);
return surplusAvatar;
};Constructors
AvatarGroup()
Defines the AvatarGroup constructor.
Declaration
public AvatarGroup()Fields
spacingUssClassName
The AvatarGroup spacing styling class.
Declaration
public const string spacingUssClassName = "appui-avatar-group--spacing-"Field Value
| Type | Description |
|---|---|
| string |
surplusUssClassName
The AvatarGroup surplus styling class.
Declaration
public const string surplusUssClassName = "appui-avatar-group__surplus"Field Value
| Type | Description |
|---|---|
| string |
ussClassName
The AvatarGroup main styling class.
Declaration
public const string ussClassName = "appui-avatar-group"Field Value
| Type | Description |
|---|---|
| string |
Properties
bindItem
Method used to bind an item to a child Avatar.
Declaration
[CreateProperty]
public Action<Avatar, int> bindItem { get; set; }Property Value
| Type | Description |
|---|---|
| Action<Avatar, int> |
contentContainer
The AvatarGroup content container.
Declaration
public override VisualElement contentContainer { get; }Property Value
| Type | Description |
|---|---|
| VisualElement |
Overrides
makeItem
Method used to create an Avatar instance.
Declaration
[CreateProperty]
public Func<Avatar> makeItem { get; set; }Property Value
| Type | Description |
|---|---|
| Func<Avatar> |
max
The maximum number of avatars to display before the overflow.
Declaration
[CreateProperty]
[UxmlAttribute]
[Header("Avatar Group")]
public int max { get; set; }Property Value
| Type | Description |
|---|---|
| int |
renderSurplus
The custom render function for the surplus avatars.
Declaration
public AvatarGroup.RenderSurplusDelegate renderSurplus { get; set; }Property Value
| Type | Description |
|---|---|
| AvatarGroup.RenderSurplusDelegate |
size
The size of avatars.
Declaration
[CreateProperty]
[UxmlAttribute]
public Size size { get; set; }Property Value
| Type | Description |
|---|---|
| Size |
sourceItems
The collection of items that will be displayed as Radio component.
Declaration
[CreateProperty]
public IList sourceItems { get; set; }Property Value
| Type | Description |
|---|---|
| IList |
spacing
The spacing between avatars.
Declaration
[CreateProperty]
[UxmlAttribute]
public AvatarGroupSpacing spacing { get; set; }Property Value
| Type | Description |
|---|---|
| AvatarGroupSpacing |
total
The AvatarGroup total count.
Declaration
[CreateProperty(ReadOnly = true)]
public int total { get; }Property Value
| Type | Description |
|---|---|
| int |
variant
The AvatarGroup variant.
Declaration
[CreateProperty]
[UxmlAttribute]
public AvatarVariant variant { get; set; }Property Value
| Type | Description |
|---|---|
| AvatarVariant |
Methods
GetDefaultSurplusElement(int)
The default surplus VisualElement.
Declaration
public static VisualElement GetDefaultSurplusElement(int surplus)Parameters
| Type | Name | Description |
|---|---|---|
| int | surplus | The number of surplus avatars. |
Returns
| Type | Description |
|---|---|
| VisualElement | The default surplus VisualElement. |
GetSpacingUssClassName(AvatarGroupSpacing)
Declaration
public static string GetSpacingUssClassName(AvatarGroupSpacing enumValue)Parameters
| Type | Name | Description |
|---|---|---|
| AvatarGroupSpacing | enumValue |
Returns
| Type | Description |
|---|---|
| string |
Refresh()
Refresh the AvatarGroup.
Declaration
public void Refresh()SetCustomTotal(int?)
Set a custom AvatarGroup total count instead of the child count.
Declaration
public void SetCustomTotal(int? customTotal)Parameters
| Type | Name | Description |
|---|---|---|
| int? | customTotal | The custom total count. |
Remarks
You can pass a null value to reset the custom total count and use the child count instead.