Collapsible

패널을 펼치거나 접을 수 있는 대화형 컴포넌트입니다.

신청서 #2026-0418

처리 상태접수 완료

examples/krds/collapsible-demo.tsx

"use client"

import * as React from "react"

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/collapsible.json

사용법

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>

구성

다음 조합으로 Collapsible:

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

제어형 상태

open과 onOpenChange prop으로 상태를 제어합니다.

import * as React from "react"

export function Example() {
  const [open, setOpen] = React.useState(false)

  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <CollapsibleTrigger>Toggle</CollapsibleTrigger>
      <CollapsibleContent>Content</CollapsibleContent>
    </Collapsible>
  )
}

예제

Basic

examples/krds/collapsible-basic.tsx

import { ChevronDownIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

Settings Panel

Use a trigger button to reveal additional settings.

Radius

Set the corner radius of the element.

examples/krds/collapsible-settings.tsx

"use client"

import * as React from "react"

File Tree

Use nested collapsibles to build a file tree.

examples/krds/collapsible-file-tree.tsx

import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

الطلب #4189

الحالةتم الشحن

examples/krds/collapsible-rtl.tsx

"use client"

import * as React from "react"

API 참조

Radix UI 문서를 참고하세요.

Checkbox Combobox