Components
@shadcn/react
@shadcn/helpers
Utilities
One
Two
Three
import {
ResizableHandle,
ResizablePanel,关于#
Resizable 组件基于 react-resizable-panels（作者 bvaughn）构建。
安装#
pnpm dlx shadcn@latest add resizable
用法#
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"<ResizablePanelGroup orientation="horizontal">
<ResizablePanel>一</ResizablePanel>
<ResizableHandle />
<ResizablePanel>二</ResizablePanel>
</ResizablePanelGroup>组合#
使用以下组合来构建 ResizablePanelGroup：
ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel垂直#
使用 orientation="vertical" 实现垂直调整大小。
Header
Content
import {
ResizableHandle,
ResizablePanel,手柄#
在 ResizableHandle 上使用 withHandle 属性以显示可见的拖拽手柄。
Sidebar
Content
import {
ResizableHandle,
ResizablePanel,RTL#
要在 shadcn/ui 中启用 RTL（从右到左）支持，请参阅RTL 配置指南。
واحد
اثنان
ثلاثة
"use client"
import * as React from "react"API 参考#
请参阅 react-resizable-panels 的文档。
更新日志#
2025-02-02 react-resizable-panels v4#
更新至 react-resizable-panels v4。完整详情请参阅 v4.0.0 发布说明。
如果你直接使用 react-resizable-panels 的基础组件，请注意以下变化：
| v3 | v4 |
|---|---|
PanelGroup | Group |
PanelResizeHandle | Separator |
direction 属性 | orientation 属性 |
defaultSize={50} | defaultSize="50%" |
onLayout | onLayoutChange |
ImperativePanelHandle | PanelImperativeHandle |
面板上的 ref 属性 | panelRef 属性 |
data-panel-group-direction | aria-orientation |
shadcn/ui 的包装组件 (ResizablePanelGroup, ResizablePanel, ResizableHandle) 保持不变。