Resizable

隣接する作業領域の幅や高さを、利用者が調整する場合に使います。

プレビュー

一覧と詳細の分割

横方向の 40/60 比率から開始し、一覧と詳細の最小領域を確保します。

一覧

詳細

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

npx shadcn@latest add @neumorphism-ui/resizable

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

ResizablePanelGroup の方向を指定し、パネル間に ResizableHandle を置きます。初期サイズと制限を設定し、外側の領域にもサイズを指定します。

"use client";

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";

export default function Example() {
  return (
    <div className="h-48">
      <ResizablePanelGroup orientation="horizontal">
        <ResizablePanel defaultSize="40%" minSize="20%"><div className="p-4">List</div></ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel defaultSize="60%" minSize="20%"><div className="p-4">Details</div></ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

API リファレンス

サイズ計算と separator のアクセシビリティは react-resizable-panels に任せます。ニューモーフィズムはパネル境界と handle の表面だけを担当します。

コンポーネント	プロパティ	型	デフォルト	説明
`ResizablePanelGroup`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	パネルの分割方向を指定します。
`ResizablePanel`	`defaultSize`	`number \| string`	`—`	初期パネルサイズを指定します。
`ResizablePanel`	`minSize / maxSize`	`number \| string`	`—`	パネルが縮小・拡大できる範囲を制限します。
`ResizableHandle`	`withHandle`	`boolean`	`false`	separator 中央に視覚的な grip を表示します。
`ResizableHandle`	`disabled`	`boolean`	`false`	separator を表示したままリサイズを無効にします。