Ocean Road
가이드
컴포넌트
가이드
컴포넌트

Accordion

제네릭 아코디언 컴포넌트입니다. 한 번에 하나의 섹션만 펼쳐지는 단일 확장 방식으로 동작합니다.

사용법

import { Accordion } from '@coldsurfers/ocean-road'

type Category = { accordionKey: string; label: string; content: string }

const items: Category[] = [
  { accordionKey: 'a', label: '항목 1', content: '내용 1' },
  { accordionKey: 'b', label: '항목 2', content: '내용 2' },
]

<Accordion
  data={items}
  renderTrigger={(item) => <span>{item.label}</span>}
  renderExpanded={({ selectedItem }) => <p>{selectedItem.content}</p>}
/>

Props

ItemT는 반드시 { accordionKey: string } 을 포함해야 합니다.

prop 타입 기본값 설명
data ItemT[] — 아코디언 항목 배열
renderTrigger (item: ItemT) => ReactNode — 각 항목의 트리거(헤더) 렌더 함수
renderExpanded ({ selectedItem }: { selectedItem: ItemT }) => ReactNode — 펼쳐진 상태에서 표시할 콘텐츠 렌더 함수
customized ReactNode — 추가로 렌더할 커스텀 콘텐츠

인터랙티브 데모

ON THIS PAGE