Collapsible
콘텐츠를 펼치거나 접을 수 있는 토글 컴포넌트
개요
Collapsible 컴포넌트는 base-ui의 Collapsible Primitive를 기반으로 트리거 클릭 시 콘텐츠 영역을 펼치거나 접는 UI를 제공합니다. 제어/비제어 모드와 비활성화 상태를 지원합니다.
주요 특징
- ✅ 펼치기/접기: Trigger 클릭으로 콘텐츠 토글
- ✅ 기본 열림 설정: defaultOpen으로 초기 상태 지정
- ✅ 제어 모드: open/onOpenChange로 상태를 프로그래밍적으로 제어
- ✅ 비활성화: disabled로 토글 동작 차단
- ✅ 접근성: ARIA 속성 자동 관리
사용 예시
기본 사용
트리거를 클릭하면 숨겨진 콘텐츠가 펼쳐집니다.
Preview
@vortex/ui-foundation
@vortex/design-md
기본 열림 상태
defaultOpen으로 초기에 펼쳐진 상태로 렌더링합니다.
Preview
이 콘텐츠는 기본으로 열려 있습니다. 트리거를 클릭하면 접힙니다.
비활성화
disabled로 토글 동작을 차단합니다.
Preview
API Reference
Collapsible Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | 열림 상태 (제어 모드) |
defaultOpen | boolean | false | 초기 열림 상태 (비제어 모드) |
onOpenChange | (open: boolean) => void | - | 열림 상태 변경 시 콜백 |
disabled | boolean | false | 토글 동작 비활성화 |
className | string | - | 추가 CSS 클래스 |
CollapsibleTrigger Props
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement | - | 트리거로 렌더링할 요소 (base-ui) |
disabled | boolean | false | 트리거 비활성화 |
className | string | - | 추가 CSS 클래스 |
CollapsibleContent Props
| Prop | Type | Default | Description |
|---|---|---|---|
keepMounted | boolean | false | 닫힌 상태에서도 DOM 유지 |
className | string | - | 추가 CSS 클래스 |
기본 사용법
import {
Collapsible,
CollapsibleTrigger,
CollapsibleContent,
} from "@vortex/ui-foundation"
<Collapsible>
<CollapsibleTrigger>토글</CollapsibleTrigger>
<CollapsibleContent>펼쳐지는 콘텐츠</CollapsibleContent>
</Collapsible>접근성
시맨틱 마크업
- base-ui Collapsible 기반으로 트리거에
aria-expanded자동 적용 - 트리거와 콘텐츠가
aria-controls로 자동 연결 - 비활성화 시
aria-disabled적용
키보드 지원
- ✅
Enter/Space로 트리거 토글 - ✅ 트리거는 네이티브 버튼으로 포커스 가능
관련 컴포넌트
- Accordion: 여러 항목을 그룹으로 펼치기/접기
- Drawer: 화면 가장자리에서 열리는 패널
- DropdownMenu: 트리거 기반 메뉴 표시
Last updated on