Accordion

타이틀 부분을 클릭하면 상세가 토글되는 컴포넌트입니다.

<Accordion title='여기를 클릭하세요'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu aliquet erat.
  Proin a lorem nec nisl malesuada rhoncus id quis orci. 
  In non velit ultrices libero viverra vulputate. 
  Etiam augue mi, tempor et mauris porttitor, ornare accumsan diam.
</Accordion>

속성 설명

title

• 타입 : ReactNode

아코디언의 헤더 타이틀을 정의합니다.

(optional) open

• 타입 : boolean

아코디언의 초기 열림 상태를 지정합니다. 만약 open={true} 인 경우 상세내용이 열린 상태로 렌더링됩니다.

<Accordion title='여기를 클릭하세요' open>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu aliquet erat.
  Proin a lorem nec nisl malesuada rhoncus id quis orci.
  In non velit ultrices libero viverra vulputate.
  Etiam augue mi, tempor et mauris porttitor, ornare accumsan diam.
</Accordion>

(optional) icon

• 타입 : AccordionHeaderIconHandler = (isOpen: boolean) => JSX.Element

아코디언의 열림 상태 표시해주는 아이콘을 정의합니다.

<Accordion title='여기를 클릭하세요' icon={(isOpen) => <div>{isOpen ? '-' : '+'}</div>}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu aliquet erat.
  Proin a lorem nec nisl malesuada rhoncus id quis orci.
  In non velit ultrices libero viverra vulputate.
  Etiam augue mi, tempor et mauris porttitor, ornare accumsan diam.
</Accordion>

(optional) hideMode

• 타입 : AccordionHideMode = 'hidden' | 'none'

아코디언의 상세 내용을 숨겼을때

이 값이 'hidden' 인 경우에는 렌더링 후에 display 속성만 none 으로 처리됩니다. 상세 내용이 한번만 렌더링 됩니다.

<Accordion title='타이틀을 눌러보세요' hideMode='hidden'>
  <TimeNow />
</Accordion>

이 값이 'none' 인 경우에는 상세 내용이 열릴때 마다 렌더링을 다시 하게 됩니다. 아래의 결과에서 보면 아코디언을 열고 닫을때 마다 시간이 계속 변합니다.

<Accordion title='타이틀을 눌러보세요' hideMode='none'>
  <TimeNow />
</Accordion>

구현 요건에 따라 적절히 이 옵션을 조절해서 사용해야 합니다.

(optional) onChange

• 타입 : AccordionChangeHandler = (isOpen: boolean) => void

아코디언의 열림 상태가 변경될때 마다 호출되는 콜백입니다. 콜백의 파라미터로 열림상태가 주어집니다.