컴포넌트
Accordion
클릭 시 grid-template-rows 0fr→1fr 전환으로 부드럽게 펼쳐지는 아코디언. 단일/다중 오픈, aria-expanded, 방향키 내비게이션, reduced-motion을 지원하는 FAQ용 컴포넌트.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Accordion-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | AccordionItem[] | 기본 FAQ 3개 | 표시할 항목 목록(id/title/content). 미지정 시 기본 FAQ 데이터 사용. |
| allowMultiple | boolean | false | true면 여러 항목 동시 오픈, false면 하나만 오픈(단일). |
| defaultOpen | number[] | [] | 최초 오픈 상태로 둘 항목 인덱스 목록. |
| duration | number | 300 | 펼침/접힘 전환 지속(ms). reduced-motion 시 0. |
| accentColor | string | #C084FC | 아이콘/오픈 보더 강조 색상. 기본값은 Vivid Kit 바이올렛. |
| className | string | undefined | 루트 래퍼에 적용할 추가 클래스. |