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 参考

使用 react-resizable-panels 处理尺寸计算和 separator 无障碍语义。新拟态只负责面板边界和 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 但禁用尺寸调整。