跳到内容
1.6k

可折叠

一套用于文件树、高级设置和“显示更多”区域的触发器与面板组合——采用新粗野主义风格的边框与阴影处理。

"use client"

import * as React from "react"

折叠面板是手风琴的单区块版本：一个触发器、一个面板，展开或收起。它基于 Base UI 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 属性来控制状态。

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"

无障碍

折叠面板遵循 WAI-ARIA Disclosure 模式：触发器是一个真正的按钮，并接好了 aria-expanded 和 aria-controls，因此屏幕阅读器会读出面板当前是否展开。

键盘交互：

按键操作
Tab / Shift + Tab把焦点移到触发器上或移开
Space / Enter展开或收起面板

API 参考

更多信息请参阅 Base UI 文档。