Thu gọn

Một cặp nút kích hoạt và bảng điều khiển dành cho cây thư mục, cài đặt nâng cao và các phần “hiển thị thêm” — với hiệu ứng viền và bóng theo phong cách tân thô mộc.

Order #4189

StatusShipped

"use client"

import * as React from "react"

Collapsible là người em một-phần của accordion: một trigger, một panel, mở hoặc đóng. Được xây dựng trên thành phần Base UI Collapsible và tạo kiểu theo công thức neobrutalist: viền dày, bóng đổ đậm và kiểu chữ đậm.

Nên dùng khi:

Cây tệp và điều hướng lồng nhau — lồng các collapsible vào nhau để mở thư mục (xem ví dụ cây tệp bên dưới).
Cài đặt nâng cao — giữ các tùy chọn thường dùng hiển thị và gấp phần còn lại sau một nút bật/tắt.
Nội dung “xem thêm” — nhật ký thay đổi dài, danh sách bị cắt bớt, chi tiết tùy chọn trên các trang dày nội dung.

Cài đặt


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

Cài đặt các phụ thuộc sau:


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

Sao chép và dán đoạn mã sau vào dự án của bạn.

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 }

Cập nhật các đường dẫn import cho phù hợp với thiết lập dự án của bạn.

Cách dùng

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>

Kết hợp

Dùng cách kết hợp sau để xây dựng một Collapsible:

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Trạng thái được kiểm soát

Dùng các prop open và onOpenChange để kiểm soát trạng thái.

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

Ví dụ

Cơ bản

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

Bảng cài đặt

Dùng một nút kích hoạt để hiển thị các cài đặt bổ sung.

Radius

Set the corner radius of the element.

"use client"

import * as React from "react"

Cây tệp

Dùng các collapsible lồng nhau để xây dựng một cây tệp.

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

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

RTL

Để bật hỗ trợ RTL trong Neobrutalism, hãy xem hướng dẫn cấu hình RTL.

الطلب #4189

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

"use client"

import * as React from "react"

Khả năng truy cập

Collapsible tuân theo mẫu Disclosure của WAI-ARIA: trigger là một nút thật được nối với aria-expanded và aria-controls, nên trình đọc màn hình đọc lên việc panel đang mở hay đang đóng.

Tương tác bàn phím:

Phím	Hành động
`Tab` / `Shift + Tab`	Di chuyển focus vào và ra khỏi trigger
`Space` / `Enter`	Mở hoặc đóng panel

Tham chiếu API

Xem tài liệu Base UI để biết thêm thông tin.