Collapsible
Collapsible은 콘텐츠를 접었다 펼칠 수 있는 대화형 컴포넌트입니다. 아코디언이나 확장 가능한 섹션을 구현할 때 사용합니다.Property
Open State
defaultOpen으로 초기 열림 상태를 설정하거나, open과 onOpenChange로 제어 모드로 사용합니다.
Disabled
Collapsible의 비활성화 상태를 설정합니다.
Keep Mounted
keepMounted를 사용하면 패널이 닫힌 상태에서도 DOM에 유지됩니다.
Props Table
Collapsible.Root
Root of the Collapsible compound component, which shows and hides a panel of content. Manages the open state. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
defaultOpen? | false | boolean |
onOpenChange? | - | function |
open? | - | boolean |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | false | boolean |
render? | - | ReactElementfunction |
Collapsible.Trigger
Button that opens and closes the collapsible panel when clicked. Renders a <button> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |
Collapsible.Panel
Content of the collapsible, which expands and collapses with a height animation. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
hiddenUntilFound? | false | boolean |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |