Collapsible

패널을 펼치거나 접을 수 있게 해 주는 상호작용 컴포넌트예요.

출처: 문서

본문

콘텐츠 영역을 접거나 펼칠 수 있게 해 주는 컴포넌트예요. "더 보기" 같은 토글 UI에 적합하며, 키보드 내비게이션을 지원하고 제어/비제어 방식 모두 쓸 수 있어요.

Features

완전한 키보드 내비게이션 지원.
제어(controlled)/비제어(uncontrolled) 방식 모두 지원.

Anatomy

컴포넌트를 임포트해 파트를 조립해요.

import { Collapsible } from "radix-ui";

export default () => (
  <Collapsible.Root>
    <Collapsible.Trigger />

    <Collapsible.Content />
  </Collapsible.Root>
);

API Reference

Root

콜래서블의 모든 파트를 담아요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`	No default value
`open`	`boolean`	No default value
`onOpenChange`	`function`	No default value
`disabled`	`boolean`	No default value

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

Trigger

콜래서블을 토글하는 버튼이에요.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

Content

접을 수 있는 콘텐츠를 담는 컴포넌트예요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	No default value

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

CSS Variable	Description
`--radix-collapsible-content-width`	The width of the content when it opens/closes
`--radix-collapsible-content-height`	The height of the content when it opens/closes

Examples

콘텐츠 크기 애니메이션

--radix-collapsible-content-width/--radix-collapsible-content-height CSS 변수로 콘텐츠가 열리고 닫힐 때 크기를 애니메이션할 수 있어요. 데모:

// index.jsx

import { Collapsible } from "radix-ui";

import "./styles.css";

export default () => (
  <Collapsible.Root>
    <Collapsible.Trigger>…</Collapsible.Trigger>

    <Collapsible.Content className="CollapsibleContent">…</Collapsible.Content>
  </Collapsible.Root>
);

/* styles.css */

.CollapsibleContent {
  overflow: hidden;
}

.CollapsibleContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}

.CollapsibleContent[data-state="closed"] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }

  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-collapsible-content-height);
  }

  to {
    height: 0;
  }
}

Accessibility

Disclosure WAI-ARIA 디자인 패턴을 준수해요.

키보드 상호작용

Key	Description
`Space`	Opens/closes the collapsible.
`Enter`	Opens/closes the collapsible.

더 알아보기 (Learn more)

Collapsible은 Accordion이 내부적으로 의존하는 기본 빌딩 블록이에요.
펼침/접힘 애니메이션은 Radix가 제공하는 content-width/content-height CSS 변수로 구현할 수 있어요.