コンテンツへスキップ
1.6k

折りたたみ

ファイルツリー、詳細設定、および「さらに表示」セクション用のトリガーとパネルの組み合わせです。ネオブルータリズム風の枠線と影の演出が施されています。

"use client"

import * as React from "react"

Collapsible はアコーディオンの単一セクション版です。トリガー1つ、パネル1つ、開または閉です。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 プロパティを使用して、状態を制御します。

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 のドキュメントをご覧ください。