Collapsible
Collapsible은 콘텐츠를 접었다 펼칠 수 있는 대화형 컴포넌트입니다. 아코디언이나 확장 가능한 섹션을 구현할 때 사용합니다.Property
Open State
defaultOpen으로 초기 열림 상태를 설정하거나, open과 onOpenChange로 제어 모드로 사용합니다.
Disabled
Collapsible의 비활성화 상태를 설정합니다.
Keep Mounted
keepMounted를 사용하면 패널이 닫힌 상태에서도 DOM에 유지됩니다.
Props Table
Collapsible.Root
콘텐츠 패널을 표시하고 숨기는 Collapsible 복합 컴포넌트의 루트. 열림 상태를 관리합니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
defaultOpen? | false | boolean |
onOpenChange? | - | function |
open? | - | boolean |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | false | boolean |
render? | - | ReactElementfunction |
Collapsible.Trigger
클릭하면 Collapsible 패널을 열고 닫는 버튼. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |
Collapsible.Panel
Collapsible의 콘텐츠. 높이 애니메이션과 함께 펼쳐지고 접힙니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
hiddenUntilFound? | false | boolean |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |