Collapsible
먼저 보고, 그다음 계약을 읽습니다
단일 disclosure 영역(한 트리거 ↔ 한 컨텐츠 show/hide).
Component intent의도와 경계 읽기
Radix Collapsible 위에 얇은 .axe-collapsible__* 스타일을 얹은 경량 접기/펴기 패턴이다. 필터 패널 토글, "더 보기"/"접기" 같은 하나의 영역만 접고 펴는 용도. 여러 항목을 묶어 스택으로 관리하는 것은 Accordion 이 맡는다(경계). 트리거에 자식을 직접 넘기면 전폭 버튼 + chevron 으로 감싸고, asChild 를 쓰면 임의 트리거로 대체한다(chevron 미주입). 부드러운 height 접기는 Radix 가 노출하는 --radix-collapsible-content-height 변수를 CSS 애니메이션으로 처리.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@axe/ui";<Collapsible defaultOpen> <CollapsibleTrigger>고급 필터</CollapsibleTrigger> <CollapsibleContent> …접히는 필터 본문… </CollapsibleContent></Collapsible>import { Collapsible, CollapsibleTrigger, CollapsibleContent, Button } from "@axe/ui";<Collapsible> <CollapsibleTrigger asChild> <Button variant="ghost">더 보기</Button> </CollapsibleTrigger> <CollapsibleContent>…</CollapsibleContent></Collapsible><div class="axe-collapsible"> <button class="axe-collapsible__trigger" data-state="open" aria-expanded="true"> <span class="axe-collapsible__trigger-label">고급 필터</span> <svg class="axe-collapsible__chevron" viewBox="0 0 12 12" aria-hidden="true"> <path d="M4 2.5 L8 6 L4 9.5" fill="none" stroke="currentColor" stroke-width="1.75" /> </svg> </button> <div class="axe-collapsible__content" data-state="open"> <div class="axe-collapsible__content-inner">…본문…</div> </div></div>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
Collapsible.defaultOpen | boolean | — | — | uncontrolled 초기 열림 상태. |
Collapsible.open | boolean | — | — | controlled 열림 상태. |
Collapsible.onOpenChange | (open: boolean) => void | — | — | 열림 상태 변경 콜백. |
Collapsible.disabled | boolean | — | — | 전체 비활성화(트리거 무반응). |
Collapsible.…rest | React.ComponentPropsWithoutRef<Radix Collapsible.Root> | — | — | 나머지는 Radix Root 로 전파(className 은 axe-collapsible 과 병합). |
CollapsibleTrigger.asChild | boolean | — | false | true 면 children 을 그대로 트리거로 사용 — 전폭 버튼 래핑·chevron 주입을 건너뛴다. |
CollapsibleTrigger.…rest | React.ComponentPropsWithoutRef<Radix Collapsible.Trigger> | — | — | 나머지는 Radix Trigger 로 전파. |
CollapsibleContent.…rest | React.ComponentPropsWithoutRef<Radix Collapsible.Content> | — | — | children 은 .axe-collapsible__content-inner 로 감싸 렌더. 나머지는 Radix Content 로 전파. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-collapsible__trigger | stable | 기본 트리거 버튼(전폭, label+chevron, hover/focus 트림). asChild 시 미부여. |
.axe-collapsible__trigger-label | stable | 트리거 라벨 span(flex:1). |
.axe-collapsible__chevron | stable | chevron SVG — [data-state=open] 시 90deg 회전. |
.axe-collapsible__content | stable | 접히는 영역(overflow hidden). data-state open/closed 에 --radix-collapsible-content-height 애니메이션. |
.axe-collapsible__content-inner | stable | content 내부 padding 래퍼. |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
- 트리거에서 Enter/Space 로 열기/접기
Radix disclosure 위임 — 트리거에 aria-expanded + aria-controls, 컨텐츠는 닫힘 시 hidden. 포커스 링은 트리거에 표시. chevron 은 aria-hidden 장식.
chevron 회전·smooth height 는 Radix 가 노출하는 data-state / --radix-collapsible-content-height 를 우리 CSS 로 처리하며 prefers-reduced-motion 을 존중한다. 루트에 부여되는 axe-collapsible 클래스는 훅(마커)일 뿐 대응 CSS 규칙이 없다 — 단일 show/hide 전용이고, 여러 항목 스택이 필요하면 Accordion 을 쓴다.