ナビゲーションと開示@neumorphism-ui/resizable

Resizable

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

@neumorphism-ui/resizable

Registry JSON

プレビュー

一覧

詳細

インストール

npx shadcn@latest add @neumorphism-ui/resizable

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

Import

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

Example

export default function Example() {
  return <ResizablePanelGroup orientation="horizontal" className="h-48 max-w-lg">
    <ResizablePanel defaultSize={40} minSize={25}><div className="grid h-full place-items-center p-4">一覧</div></ResizablePanel>
    <ResizableHandle withHandle />
    <ResizablePanel defaultSize={60} minSize={30}><div className="grid h-full place-items-center p-4">詳細</div></ResizablePanel>
  </ResizablePanelGroup>;
}

API リファレンス

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