Components
@shadcn/react
@shadcn/helpers
Utilities
One
Two
Three
import {
ResizableHandle,
ResizablePanel,关于#
Resizable 组件基于 bvaughn 的 react-resizable-panels 构建。
安装#
pnpm dlx shadcn@latest add resizable
用法#
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"<ResizablePanelGroup orientation="horizontal">
<ResizablePanel>One</ResizablePanel>
<ResizableHandle />
<ResizablePanel>Two</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 prop | orientation prop |
defaultSize={50} | defaultSize="50%" |
onLayout | onLayoutChange |
ImperativePanelHandle | PanelImperativeHandle |
Panel 上的 ref prop | panelRef prop |
data-panel-group-direction | aria-orientation |
shadcn/ui 的包装组件（ResizablePanelGroup、ResizablePanel、
ResizableHandle）保持不变。