コンテンツ
リサイズ可能ResizableExperimental
キーボード操作にも対応した、リサイズ可能な分割パネルレイアウトです。
プレビュー
状態とバリエーション
水平分割
サイドバーとメイン領域のような左右分割に使います。
垂直分割
プレビューとログ、エディタとコンソールなど上下分割に使います。
入れ子
ファイル、エディタ、ターミナルのような複合ワークスペースを作ります。
3 カラム
ナビゲーション、本文、インスペクターのような横 3 分割を構成します。
折りたたみ可能
補助パネルを最小化できるレイアウトにします。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| direction | "vertical" | "horizontal" | - | 分割方向です。ResizablePanelGroup に指定します。 |
| defaultLayout | Record<string, number> | - | パネル ID ごとの初期比率です。ハンドルをダブルクリックした時のリセット先にも使います。 |
| groupRef | Ref<GroupImperativeHandle> | - | 現在の比率取得や setLayout によるレイアウト変更に使います。 |
| onLayoutChange / onLayoutChanged | (layout: Record<string, number>) => void | - | パネルサイズが変わる時、または変更完了時に呼び出されます。 |
| defaultSize | number | string | - | ResizablePanel の初期サイズです。割合で使う場合は "32%" のように単位を明示します。 |
| minSize / maxSize | number | string | - | ResizablePanel の最小/最大サイズです。割合指定では "20%" のように書きます。 |
| collapsible | boolean | - | パネルを折りたためるようにします。 |
| withHandle | boolean | - | ResizableHandle に視覚的なグリップを表示します。 |
使い方
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@gunjo/ui";
export function ResizableWorkspace() {
return (
<div className="h-64 w-full max-w-2xl overflow-hidden rounded-lg border">
<ResizablePanelGroup direction="horizontal" defaultLayout={{ sidebar: 32, canvas: 68 }} className="h-full w-full">
<ResizablePanel id="sidebar" defaultSize="32%" minSize="20%">
<div className="flex h-full items-center justify-center p-4">サイドバー</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel id="canvas" defaultSize="68%" minSize="40%">
<div className="flex h-full items-center justify-center p-4">キャンバス</div>
</ResizablePanel>
</ResizablePanelGroup>
</div>
);
}使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。