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