Collapsible - Kitchen Sink

기본 사용법

trigger와 content 슬롯을 사용하여 접을 수 있는 컨텐츠를 만듭니다.

          <Collapsible> <CollapsibleTrigger slot="trigger" variant="outline" size="default"
          class="w-full justify-between"> <span>클릭하여 펼치기</span>
          <svg>...</svg> </CollapsibleTrigger> <div class="p-16 bg-gray-50
          rounded-[4px] mt-8"> <p>컨텐츠 내용</p> </div> </Collapsible>
        

기본 열림 상태

defaultOpen prop으로 초기 상태를 열림으로 설정할 수 있습니다.

이 컨텐츠는 기본적으로 열려있는 상태입니다.

          <Collapsible defaultOpen=true> <CollapsibleTrigger
          slot="trigger">...</CollapsibleTrigger> <div>...</div>
          </Collapsible>
        

실제 사용 예시

실제 프로젝트에서 사용하는 패턴입니다.

          <Collapsible class="gap-y-8"> <CollapsibleTrigger slot="trigger" gap="gap-[6px]
          bg-primary-02" justify="end" iconPosition="right" class="py-0 px-0" >
          <span>Coupon Discount</span> <div>- US$000.000.00</div>
          <svg>...</svg> </CollapsibleTrigger> <div>...</div>
          </Collapsible>
        

Collapsible Props

Prop	Type	Default	Description
`defaultOpen`	boolean	false	초기 열림 상태
`id`	string	자동 생성	고유 ID
`class`	string	-	추가 CSS 클래스

CollapsibleTrigger Props

CollapsibleTrigger는 Button 컴포넌트의 모든 props를 상속받습니다.

Prop	Type	Description
`...buttonProps`	Button Props	Button 컴포넌트의 모든 props 사용 가능 (variant, size, iconPosition 등)