Accordion

아코디언/접기 컴포넌트

Accordion#

콘텐츠를 접었다 펼 수 있는 아코디언 컴포넌트입니다.

사용법#

// 기본 아코디언
CouiAccordion(
  items: [
    CouiAccordionItem(
      title: '섹션 1',
      child: Text('섹션 1의 내용입니다.'),
    ),
    CouiAccordionItem(
      title: '섹션 2',
      child: Text('섹션 2의 내용입니다.'),
    ),
    CouiAccordionItem(
      title: '섹션 3',
      child: Text('섹션 3의 내용입니다.'),
    ),
  ],
)

// 다중 열기 허용
CouiAccordion(
  allowMultiple: true,
  items: accordionItems,
)

// 초기 열림 상태
CouiAccordion(
  initialOpenIndexes: [0],
  items: accordionItems,
)

Accordion(
  items: [
    AccordionItem(
      title: '섹션 1',
      child: Text('섹션 1의 내용입니다.'),
    ),
    AccordionItem(
      title: '섹션 2',
      child: Text('섹션 2의 내용입니다.'),
    ),
  ],
)

Accordion(allowMultiple: true, items: accordionItems)

Props / Parameters#

CouiAccordion#

속성	타입	기본값	설명
`items`	`List<CouiAccordionItem>`	필수	아코디언 항목 목록
`allowMultiple`	`bool`	`false`	동시에 여러 항목 열기 허용
`initialOpenIndexes`	`List<int>`	`[]`	초기 열린 항목 인덱스
`onChanged`	`ValueChanged<List<int>>?`	`null`	상태 변경 콜백

CouiAccordionItem#

속성	타입	기본값	설명
`title`	`String`	필수	헤더 제목
`subtitle`	`String?`	`null`	부제목
`leading`	`Widget?`	`null`	좌측 아이콘
`child`	`Widget`	필수	펼침 내용
`enabled`	`bool`	`true`	활성화 여부

변형 (Variants)#

아이콘 포함#

CouiAccordionItem(
  leading: Icon(Icons.person),
  title: '개인 정보',
  child: PersonalInfoForm(),
)

FAQ 스타일#

CouiAccordion(
  items: faqList.map((faq) => CouiAccordionItem(
    title: faq.question,
    child: Text(faq.answer),
  )).toList(),
)

단일 항목 (접기/펼치기)#

CouiAccordionItem(
  title: '고급 설정',
  initiallyOpen: false,
  child: AdvancedSettingsPanel(),
)