콘텐츠로 건너뛰기
1.6k

접기

파일 트리, 고급 설정 및 ‘더 보기’ 섹션을 위한 트리거-패널 쌍 — 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되었습니다.

"use client"

import * as React from "react"

Collapsible은 아코디언의 한 섹션짜리 형제입니다. 트리거 하나, 패널 하나, 열림 아니면 닫힘. Base UI Collapsible 컴포넌트를 기반으로 하며, 네오브루탈리즘 공식(두꺼운 테두리, 선명한 그림자, 굵은 서체)에 맞춰 스타일을 입혔습니다.

다음과 같은 경우에 사용합니다.

  • 파일 트리와 중첩 내비게이션 — collapsible을 중첩해 폴더를 펼칩니다(아래 파일 트리 예제 참고).
  • 고급 설정 — 자주 쓰는 옵션은 보이게 두고 나머지는 토글 뒤로 접어 둡니다.
  • "더 보기" 콘텐츠 — 긴 변경 로그, 잘라낸 목록, 밀도 높은 페이지의 부가 정보.

설치

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/collapsible.json
npx shadcn@latest add https://neobrutalism.com/r/base/collapsible.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/collapsible.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/collapsible.json

다음 의존성을 설치합니다.

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

다음 코드를 복사해 프로젝트에 붙여넣습니다.

components/ui/collapsible.tsx
"use client"

import { Collapsible as CollapsiblePrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Collapsible({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
  return (
    <CollapsiblePrimitive.CollapsibleTrigger
      data-slot="collapsible-trigger"
      {...props}
    />
  )
}

function CollapsibleContent({
  className,
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
  return (
    <CollapsiblePrimitive.CollapsibleContent
      data-slot="collapsible-content"
      // Radix publishes the measured height as
      // `--radix-collapsible-content-height`; the collapsible-down/up keyframes
      // interpolate against it for a real slide open/close.
      className={cn(
        "overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up",
        className
      )}
      {...props}
    />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }

임포트 경로를 프로젝트 구성에 맞게 수정합니다.

사용법

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>
  )
}

예제

기본

import { ChevronDownIcon } from "@/registry/icons/__lucide__"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

설정 패널

트리거 버튼을 사용해 추가 설정을 표시합니다.

"use client"

import * as React from "react"

파일 트리

중첩된 collapsible 을 사용해 파일 트리를 구축합니다.

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

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

RTL

Neobrutalism에서 RTL 지원을 활성화하는 방법은 RTL 설정 가이드를 참고하세요.

"use client"

import * as React from "react"

접근성

Collapsible은 WAI-ARIA Disclosure 패턴을 따릅니다. 트리거는 aria-expanded와 aria-controls가 연결된 실제 버튼이므로, 스크린 리더가 패널이 열려 있는지 여부를 읽어 줍니다.

키보드 상호작용:

키동작
Tab / Shift + Tab트리거로 포커스 이동, 또는 트리거에서 포커스 이탈
Space / Enter패널 열기/닫기

API 참조

자세한 내용은 Base UI 문서를 참고하세요.