Resizable

インポート

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@caroainc/ui-components/resizable'

react-resizable-panels のインストールが必要です。

npm install react-resizable-panels

基本的な使い方

パネル 1

パネル 2

<ResizablePanelGroup direction="horizontal" className="max-w-md rounded-md border">
  <ResizablePanel defaultSize={50}>
    <div className="flex h-[200px] items-center justify-center p-6">
      <span className="font-semibold">パネル 1</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <div className="flex h-[200px] items-center justify-center p-6">
      <span className="font-semibold">パネル 2</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

垂直方向

ヘッダー

コンテンツ

<ResizablePanelGroup direction="vertical" className="min-h-[200px] max-w-md rounded-md border">
  <ResizablePanel defaultSize={25}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">ヘッダー</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={75}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">コンテンツ</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

ハンドル付き

withHandle プロップを使用すると、視覚的なハンドルを表示できます。

パネル 1

パネル 2

<ResizablePanelGroup direction="horizontal" className="max-w-md rounded-md border">
  <ResizablePanel defaultSize={50}>
    <div className="flex h-[200px] items-center justify-center p-6">
      <span className="font-semibold">パネル 1</span>
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}>
    <div className="flex h-[200px] items-center justify-center p-6">
      <span className="font-semibold">パネル 2</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

3パネル構成

サイドバー

メイン

詳細

複数のハンドルが並ぶ場合、スクリーンリーダー利用者がどのハンドルか区別できるよう aria-label を付与することを推奨します（ResizableHandleは内部でreact-resizable-panelsのPanelResizeHandleへpropsをそのまま透過するため、aria-labelをそのまま渡せます）。

<ResizablePanelGroup direction="horizontal" className="max-w-md rounded-md border">
  <ResizablePanel defaultSize={25}>
    <div className="flex h-[200px] items-center justify-center p-6">
      サイドバー
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle aria-label="サイドバーとメインの境界" />
  <ResizablePanel defaultSize={50}>
    <div className="flex h-[200px] items-center justify-center p-6">
      メイン
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle aria-label="メインと詳細の境界" />
  <ResizablePanel defaultSize={25}>
    <div className="flex h-[200px] items-center justify-center p-6">
      詳細
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

Props

ResizablePanelGroup

Prop	Type	Default	Description
`direction`	`'horizontal' \| 'vertical'`	`-`	パネルの配置方向
`onLayout`	`(sizes: number[]) => void`	`-`	レイアウト変更時のコールバック

ResizablePanel

Prop	Type	Default	Description
`defaultSize`	`number`	`-`	初期サイズ（パーセント）
`minSize`	`number`	`-`	最小サイズ（パーセント）
`maxSize`	`number`	`-`	最大サイズ（パーセント）
`collapsible`	`boolean`	`-`	折りたたみ可能かどうか
`collapsedSize`	`number`	`-`	折りたたみ時のサイズ
`onCollapse`	`() => void`	`-`	折りたたみ時のコールバック
`onExpand`	`() => void`	`-`	展開時のコールバック

ResizableHandle

Prop	Type	Default	Description
`withHandle`	`boolean`	`false`	視覚的なハンドルを表示するかどうか

Resizable

On this page