Collapsible

추가 정보나 고급 설정처럼 독립적인 영역 하나를 펼치고 접을 때 사용합니다.

미리보기

세부 설정 펼치기

주변 콘텐츠를 유지하면서 제어 상태의 세부 설정 영역을 전환합니다.

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/collapsible

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

Collapsible 안에 CollapsibleTrigger와 CollapsibleContent를 배치하세요. 앱이 펼침 여부를 알아야 한다면 open과 onOpenChange로 상태를 제어합니다.

"use client";

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

export default function Example() {
  return (
    <Collapsible>
      <CollapsibleTrigger>Advanced settings</CollapsibleTrigger>
      <CollapsibleContent><div>Optional project settings go here.</div></CollapsibleContent>
    </Collapsible>
  );
}

API 레퍼런스

추가 설정 한 묶음을 펼치거나 접는 컨테이너. 트리거의 이름은 내용과 관계를 설명해야 합니다. Enter와 Space로 펼침을 확인하세요.

컴포넌트	속성	타입	기본값	설명
`Collapsible`	`open / defaultOpen`	`boolean`	`—`	제어 상태 또는 최초 상태를 지정합니다.
`CollapsibleTrigger`	`disabled`	`boolean`	`—`	사용자 조작을 비활성화합니다.
`CollapsibleContent`	`keepMounted`	`boolean`	`—`	접혀 있을 때도 패널을 DOM에 유지합니다.

미리보기

세부 설정 펼치기

설치

사용법

API 레퍼런스

접근성