コンテンツ
リサイズ可能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 に視覚的なグリップを表示します。 |
使い方
Loading...