Accordion

콘텐츠의 숨겨진 내용을 확장하거나 축소하여 보여주는 요소입니다. 클릭하여 원하는 정보만 선택적으로 볼 수 있어, 제한된 공간에서 많은 정보를 효율적으로 구성하고 탐색할 수 있도록 돕습니다.

@MainActor struct Accordion

Overview

Accordion은 제목과 함께 접을 수 있는 컨텐츠를 제공하는 컴포넌트입니다. 제목을 탭하면 컨텐츠가 확장되거나 축소됩니다. 설명 텍스트와 커스텀 컨텐츠를 함께 표시할 수 있습니다.

아코디언은 제한된 공간에서 많은 정보를 효율적으로 표시하기 위한 UI 패턴입니다. 사용자는 관심 있는 항목만 확장하여 볼 수 있습니다.

// 기본 사용법
Accordion(
    title: "아코디언 제목",
    description: "아코디언 설명 텍스트입니다."
)

// 커스텀 컨텐츠 추가
Accordion(
    title: "커스텀 컨텐츠",
    description: "설명 텍스트"
) {
    VStack(alignment: .leading, spacing: 8) {
        Text("커스텀 컨텐츠 1")
        Text("커스텀 컨텐츠 2")
    }
}

// 스타일 커스터마이징
Accordion(title: "커스텀 스타일")
    .title(.headline, weight: .semibold, color: .red)
    .verticalPadding(.small)
    .leadingIcon(.info)
    .variant(.full)

Topics

Initializers

init(title: String, description: String?)

아코디언을 생성합니다.

  • Parameters

    ParameterDescription
    title아코디언의 제목
    description확장 시 표시될 설명 텍스트, 생략하면 기본값으로 nil 적용
init<V>(title: String, description: String?, content: () -> V)

아코디언을 생성합니다.

  • Parameters

    ParameterDescription
    title아코디언의 제목
    description확장 시 표시될 설명 텍스트, 생략하면 기본값으로 nil 적용
    content확장 시 표시될 커스텀 컨텐츠 뷰

Instance Properties

var body: some View

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

Instance Methods

func description(Typography.Variant, weight: Typography.Weight, color: SwiftUI.Color) -> Accordion

설명 텍스트의 타이포그래피 속성을 조정합니다.

  • Parameters

    ParameterDescription
    variant텍스트 변형, 생략하면 기본값으로 .label1 적용
    weight텍스트 굵기, 생략하면 기본값으로 .regular 적용
    color텍스트 색상, 생략하면 기본값으로 .semantic(.foregroundNeutralSecondary) 적용

  • Return Value

    수정된 아코디언 인스턴스

func hideDivider(Bool) -> Accordion

아코디언 하단의 구분선을 숨깁니다.

  • Parameters

    ParameterDescription
    hideDivider구분선을 숨길지 여부, 생략하면 기본값으로 true 적용

  • Return Value

    수정된 아코디언 인스턴스

func leadingContent<V>(() -> V) -> Accordion

아코디언 제목 앞에 커스텀 컨텐츠를 추가합니다.

  • Parameters

    ParameterDescription
    leadingContent표시할 커스텀 컨텐츠 뷰

  • Return Value

    수정된 아코디언 인스턴스

  • Discussion

    leadingIcon과 동일한 슬롯을 공유하므로, 두 모디파이어를 함께 호출하면 마지막에 호출된 쪽이 적용됩니다.

func leadingIcon(Icon?, color: SwiftUI.Color?) -> Accordion

아코디언 제목 앞에 아이콘을 추가합니다.

  • Parameters

    ParameterDescription
    leadingIcon표시할 아이콘, 생략하면 기본값으로 nil 적용
    color아이콘 색상, 생략하면 기본값으로 nil 적용 (기본 색상 사용)

  • Return Value

    수정된 아코디언 인스턴스

  • Discussion

    leadingContent { ... }와 동일한 슬롯을 공유하므로, 두 모디파이어를 함께 호출하면 마지막에 호출된 쪽이 적용됩니다.

func title(Typography.Variant, weight: Typography.Weight, color: SwiftUI.Color) -> Accordion

타이틀 텍스트의 타이포그래피 속성을 조정합니다.

  • Parameters

    ParameterDescription
    variant텍스트 변형, 생략하면 기본값으로 .body2 적용
    weight텍스트 굵기, 생략하면 기본값으로 .bold 적용
    color텍스트 색상, 생략하면 기본값으로 .semantic(.foregroundNeutralPrimary) 적용

  • Return Value

    수정된 아코디언 인스턴스

func trailingContent<V>((Bool) -> V) -> Accordion

아코디언 헤더 우측에 커스텀 컨텐츠를 추가합니다.

  • Parameters

    ParameterDescription
    trailingContent표시할 컨텐츠를 생성하는 클로저 (아코디언이 펼쳐진 상태를 파라미터로 받음)

  • Return Value

    수정된 아코디언 인스턴스

  • Discussion

    이 수정자를 사용하면 기본 화살표 아이콘이 대체됩니다.

func variant(Variant) -> Accordion

아코디언의 형태를 설정합니다.

  • Parameters

    ParameterDescription
    variant적용할 아코디언 형태, 생략하면 기본값으로 .inset 적용

  • Return Value

    수정된 아코디언 인스턴스

  • Discussion

    아코디언의 좌우 여백과 인터랙션 효과(pressed 배경)의 확장 폭·모서리 둥글기가 함께 정해집니다. 두 형태의 차이는 Accordion.Variant를 참고하세요.

    // 리스트가 좌우 여백을 주는 경우 (기본값)
Accordion(title: "아코디언 제목")

// 아코디언이 리스트 폭을 채우는 경우
Accordion(title: "아코디언 제목")
    .variant(.full)

    Note

    4.0.0에서 제거된 fillWidth(_:)를 대체합니다. fillWidth(false)는 Accordion.Variant.inset, fillWidth(true)는 Accordion.Variant.full에 대응합니다.

func verticalPadding(VerticalPadding) -> Accordion

아코디언 헤더의 상하 여백 크기를 조정합니다.

  • Parameters

    ParameterDescription
    verticalPadding상하 여백 크기, 생략하면 기본값으로 .large 적용

  • Return Value

    수정된 아코디언 인스턴스

Enumerations

enum Variant

아코디언이 놓이는 리스트(컨테이너)의 가장자리를 기준으로 한 아코디언의 형태입니다.

  • Overview

    좌우 여백과 인터랙션 배경의 확장 폭·모서리 둥글기를 하나로 묶은 값으로, 세 값을 따로 지정할 수는 없습니다. 두 형태 모두 콘텐츠는 리스트 기준 같은 자리에 놓이고, 인터랙션 배경이 리스트 좌우 끝까지 닿는지만 달라집니다.

Enumeration Cases

case full

인터랙션 배경이 리스트 좌우 끝까지 각지게 채우는 형태입니다.

  • Discussion

    아코디언이 리스트 폭을 채우고 좌우 여백 20을 직접 가지며, 인터랙션 배경은 헤더와 같은 크기로 그려집니다.

case inset

인터랙션 배경이 리스트 좌우 끝에 닿지 않고 안쪽에 둥글게 그려지는 형태입니다.

  • Discussion

    아코디언은 콘텐츠 폭을 그대로 쓰고 좌우 여백은 리스트가 줍니다. 인터랙션 배경만 헤더보다 좌우로 12 넓어지고 모서리가 12 둥글게 처리됩니다.

enum VerticalPadding

아코디언의 상하 여백을 나타내는 열거형입니다.

  • Overview

    아코디언 헤더의 상하 패딩 값을 설정합니다.

Enumeration Cases

case large

넓은 여백

case medium

중간 여백

case small

좁은 여백

Relationships

Conforms To

Swift.Sendable

SwiftUICore.View

© 2026 Wanted Lab, Inc.