Avatar Group

A component that displays a group of avatars.

Preview

Avatar Preview

Code Example

let model = AvatarGroupVM {
  $0.maxVisibleAvatars = 5
  $0.cornerRadius = .full
  $0.size = .small
  $0.items = [
    AvatarItemVM {
      $0.placeholder = .text("IM")
      $0.imageSrc = .remote(URL("https://my-backend.com/avatars/im.png")!)
    },
    AvatarItemVM {
      $0.placeholder = .sfSymbol("person.circle")
      $0.imageSrc = .remote(URL("https://my-backend.com/avatars/ab.png")!)
    },
    AvatarItemVM {
      $0.placeholder = .icon("avatar_placeholder")
      $0.imageSrc = .local("avatar_image")
    }
  ]
}

API

AvatarGroupVM Props

A model that defines the appearance properties for an avatar group component.

NameTypeDefaultDescription
borderColorUniversalColor.backgroundThe border color of avatars.
colorComponentColor?nilThe color of the placeholders.
cornerRadiusComponentRadiusfullThe corner radius of the avatars.
items[AvatarItemVM][]The array of avatars in the group.
maxVisibleAvatarsInt5The maximum number of visible avatars.
sizeComponentSizemediumThe predefined size of the component.

AvatarItemVM Props

A model that defines the appearance properties for an avatar in the group.

NameTypeDefaultDescription
imageSrcAvatarVM.ImageSource?nilThe source of the image to be displayed.
placeholderAvatarVM.Placeholder.icon("avatar_placeholder")The placeholder that is displayed if the image is not provided or fails to load.

SUAvatarGroup

public init(model: AvatarGroupVM)

UKAvatarGroup

Initializers

public init(model: AvatarGroupVM)

Public Properties

NameTypeDescription
modelAvatarGroupVMA model that defines the appearance properties.

Public Subviews

NameTypeDescription
stackViewUIStackViewThe stack view that contains avatars.