import {
ResizableHandle,
ResizablePanel,Resizable は、ユーザーがドラッグして割合を変えられるパネルに領域を分割します。横または縦、入れ子可能で、キーボード操作可能なハンドル付きです。両バリアントとも bvaughn の react-resizable-panels を包み、ネオブルータリストのレシピに沿ってスタイルしています。太い枠線、硬い影、太字のタイポグラフィです。
次のような場面で使います：
- コードエディタと IDE 風レイアウト — ファイルツリー、エディタ、プレビューを好みの幅に。
- マスター／ディテール — 受信箱とスレッド、テーブルとレコード詳細。区切り位置はユーザーが決めます。
- ダッシュボードとコンソール — モーダルなしで、ログやターミナルがメインビューの高さを奪えるように。
概要#
Resizable コンポーネントは、bvaughn 氏による react-resizable-panels を基盤としています。
インストール#
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/resizable.jsonnpx shadcn@latest add https://neobrutalism.com/r/base/resizable.jsonyarn dlx shadcn@latest add https://neobrutalism.com/r/base/resizable.jsonbunx --bun shadcn@latest add https://neobrutalism.com/r/base/resizable.json
以下の依存関係をインストールします。
pnpm add react-resizable-panelsnpm install react-resizable-panelsyarn add react-resizable-panelsbun add react-resizable-panels
以下のコードをコピーして、プロジェクトに貼り付けます。
"use client"
import * as ResizablePrimitive from "react-resizable-panels"
import { cn } from "@/lib/utils"
function ResizablePanelGroup({
className,
...props
}: ResizablePrimitive.GroupProps) {
return (
<ResizablePrimitive.Group
data-slot="resizable-panel-group"
className={cn(
"flex h-full w-full aria-[orientation=vertical]:flex-col",
className
)}
{...props}
/>
)
}
function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
}
function ResizableHandle({
withHandle,
className,
...props
}: ResizablePrimitive.SeparatorProps & {
withHandle?: boolean
}) {
return (
<ResizablePrimitive.Separator
data-slot="resizable-handle"
className={cn(
"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
className
)}
{...props}
>
{withHandle && (
<div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />
)}
</ResizablePrimitive.Separator>
)
}
export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
インポートのパスをプロジェクトの構成に合わせて更新します。
使い方#
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"<ResizablePanelGroup orientation="horizontal">
<ResizablePanel>One</ResizablePanel>
<ResizableHandle />
<ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>コンポジション#
ResizablePanelGroup を構築するには、次のコンポジションを使用します。
ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel使用例#
垂直#
垂直方向のリサイズには orientation="vertical" を使用します。
import {
ResizableHandle,
ResizablePanel,ハンドル#
ResizableHandle の withHandle プロパティを使って、目に見えるハンドルを表示します。
import {
ResizableHandle,
ResizablePanel,RTL#
Neobrutalism で RTL を有効にする方法は、RTL 設定ガイドをご覧ください。
"use client"
import * as React from "react"アクセシビリティ#
ハンドルは WAI-ARIA Window Splitter パターン に従います。react-resizable-panels は各ハンドルをフォーカス可能な role="separator" として描画し、aria-valuenow／aria-valuemin／aria-valuemax と、リサイズ対象パネルを指す aria-controls を付けます。スクリーンリーダーは分割位置の変化を読み上げます。
キーボード操作：
| キー | 操作 |
|---|---|
Tab / Shift + Tab | リサイズハンドルへ／からフォーカスを移動 |
ArrowLeft / ArrowRight | 横グループを1ステップリサイズ |
ArrowUp / ArrowDown | 縦グループを1ステップリサイズ |
Home | ハンドル前のパネルを最小サイズへ縮める |
End | ハンドル前のパネルを最大サイズへ広げる |
Enter | 折りたたみ可能なパネルの開閉を切り替え |
APIリファレンス#
詳しくは react-resizable-panels のドキュメントをご覧ください。
Changelog#
2025-02-02 react-resizable-panels v4#
react-resizable-panels v4 に更新しました。詳しくは v4.0.0 リリースノートをご覧ください。
react-resizable-panels のプリミティブを直接使用している場合は、次の変更点にご注意ください。
| v3 | v4 |
|---|---|
PanelGroup | Group |
PanelResizeHandle | Separator |
direction prop | orientation prop |
defaultSize={50} | defaultSize="50%" |
onLayout | onLayoutChange |
ImperativePanelHandle | PanelImperativeHandle |
ref prop on Panel | panelRef prop |
data-panel-group-direction | aria-orientation |
Neobrutalism
のラッパーコンポーネント（ResizablePanelGroup・ResizablePanel・ResizableHandle）は変更されません。