컴포넌트
Collapsible
하나의 영역을 접거나 펼칩니다.
모션
내용의 실제 높이에 맞춰 200ms 동안 펼치거나 접습니다. 움직임 감소 설정에서는 전환을 생략합니다. 공통 모션 규칙을 따릅니다.
설치
pnpm dlx ply-ui add collapsible공통 설치 설정을 먼저 적용합니다.
사용법
Trigger와 Panel은 같은 Root 안에 둡니다.
open/onOpenChange를 연결하면 다른 컨트롤에서도 펼침 상태를 바꿀 수 있습니다.
구성
| 구성 요소 | 역할 |
|---|---|
Root | 한 영역의 열림 상태를 관리합니다. |
Trigger | 내용을 펼치거나 접습니다. |
Panel | 펼쳐지는 내용을 담습니다. |
구현 코드
components/ui/collapsible.tsx
"use client";
import type { ComponentProps } from "react";
import { Collapsible as Primitive } from "@base-ui/react/collapsible";
import { withClassName } from "../../lib/cx";
import "./collapsible.css";
// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
function CollapsibleTrigger({
className,
...props
}: ComponentProps<typeof Primitive.Trigger>) {
return (
<Primitive.Trigger
{...props}
className={withClassName("rbx-button", className)}
/>
);
}
function CollapsiblePanel({
className,
...props
}: ComponentProps<typeof Primitive.Panel>) {
return (
<Primitive.Panel
{...props}
className={withClassName("rbx-accordion-panel", className)}
/>
);
}
// Root/Portal 등 스타일 없는 파트와 제네릭 API는 원본을 그대로 보존합니다.
export const Collapsible = {
...Primitive,
Trigger: CollapsibleTrigger,
Panel: CollapsiblePanel,
};
components/ui/collapsible.css
@import "./button.css";
@import "./accordion.css";
/* Collapsible: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */