导航与展开@neumorphism-ui/resizable

Resizable

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