Avatar group

Avatar Group은 여러 사용자를 그룹으로 묶어 표시하는 요소입니다. 겹쳐진 아바타 목록을 통해 공간을 효율적으로 사용하며, 그룹에 속한 멤버들을 직관적으로 보여주고 추가 멤버 수를 표시할 수 있습니다.

@MainActor struct AvatarGroup

Overview

최대 5개의 아바타를 부분적으로 겹쳐 표시하며, 각 아바타에 개별 탭 동작을 지정할 수 있습니다.

// 기본 그룹 아바타
AvatarGroup(
    ["https://example.com/user1.jpg", "https://example.com/user2.jpg"],
    variant: .person,
    size: .small
)

// 탭 동작과 후행 콘텐츠가 있는 그룹 아바타
AvatarGroup(
    imageUrls,
    variant: .person,
    size: .small,
    onTap: { index in
        print("탭한 아바타 인덱스: \(index)")
    }
)
.trailingContent {
    Text("+3").typography(variant: .body2)
}

Topics

Initializers

init([String], variant: Avatar.Variant, size: Size, onTap: ((_ index: Int) -> Void)?)

URL 문자열 배열로 그룹 아바타를 초기화합니다.

  • Parameters
    ParameterDescription
    imageUrls표시할 이미지의 URL 문자열 배열 (최대 5개)
    variant아바타 유형
    size그룹 아바타 크기
    onTap각 아바타 탭 시 실행할 액션 (인덱스가 전달됨), 생략하면 기본값으로 nil 적용
init([Image], variant: Avatar.Variant, size: Size, onTap: ((_ index: Int) -> Void)?)

SwiftUI Image 배열로 그룹 아바타를 초기화합니다.

  • Parameters
    ParameterDescription
    images표시할 SwiftUI Image 배열 (최대 5개)
    variant아바타 유형
    size그룹 아바타 크기
    onTap각 아바타 탭 시 실행할 액션 (인덱스가 전달됨), 생략하면 기본값으로 nil 적용

Instance Properties

var body: some View

뷰의 내용과 동작을 정의합니다.

Instance Methods

func contentMode(ContentMode) -> AvatarGroup

이미지의 콘텐츠 모드를 설정합니다.

  • Parameters

    ParameterDescription
    contentMode콘텐츠 모드, .fit 또는 .fill

  • Return Value

    수정된 그룹 아바타 인스턴스

func trailingContent<V>(() -> V) -> AvatarGroup

그룹 아바타 오른쪽에 추가적인 콘텐츠를 표시합니다.

  • Parameters

    ParameterDescription
    trailingContent표시할 뷰를 생성하는 클로저

  • Return Value

    수정된 그룹 아바타 인스턴스

  • Discussion

    이 수정자를 사용하여 아바타 그룹 옆에 추가 정보(예: “+3” 같은 추가 멤버 수)를 표시할 수 있습니다.

Enumerations

enum Size

그룹 아바타의 크기와 간격을 정의하는 열거형입니다.

Enumeration Cases

case small

작은 크기

case xsmall

가장 작은 크기

Relationships

Conforms To

Swift.Sendable

SwiftUICore.View

© 2026 Wanted Lab, Inc.