import {
ResizableHandle,
ResizablePanel,关于
🌐 About
Resizable 组件是由 bvaughn 基于 react-resizable-panels 构建的。
🌐 The Resizable component is built on top of react-resizable-panels by bvaughn.
安装
🌐 Installation
pnpm dlx shadcn@latest add resizable
用法
🌐 Usage
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"<ResizablePanelGroup orientation="horizontal">
<ResizablePanel>One</ResizablePanel>
<ResizableHandle />
<ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>示例
🌐 Examples
垂直
🌐 Vertical
使用 orientation="vertical" 进行垂直调整大小。
🌐 Use orientation="vertical" for vertical resizing.
import {
ResizableHandle,
ResizablePanel,处理
🌐 Handle
在 ResizableHandle 上使用 withHandle 属性以显示可见的句柄。
🌐 Use the withHandle prop on ResizableHandle to show a visible handle.
import {
ResizableHandle,
ResizablePanel,从右到左
🌐 RTL
要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。
🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.
"use client"
import * as React from "react"API参考
🌐 API Reference
请参阅 react-resizable-panels 文档。
🌐 See the react-resizable-panels documentation.
更新日志
🌐 Changelog
2025-02-02 react-resizable-panels v4
已更新至 react-resizable-panels v4。详细信息请参见 v4.0.0 发行说明。
🌐 Updated to react-resizable-panels v4. See the v4.0.0 release notes for full details.
如果你直接使用 react-resizable-panels 原语，请注意以下变化：
🌐 If you're using react-resizable-panels primitives directly, note the following changes:
| 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）保持不变。