Collapsible

Collapsible (콜랩시블)

패널을 펼치거나 접는 인터랙티브한 컴포넌트예요. 콘텐츠를 접어두고 필요할 때만 펼쳐 보여주고 싶을 때 유용해요.

출처: 문서

본문

설치 (Installation)

CLI Manual 
npx shadcn@latest add collapsible

다음 의존성을 설치해요.

npm install @radix-ui/react-collapsible

아래 코드를 프로젝트에 복사해서 붙여넣어요.

import 경로를 프로젝트 설정에 맞게 수정해요.

사용법 (Usage)

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>

더 알아보기 (Learn more)