106k
New

可调整大小 Resizable

PreviousNext

支持键盘操作的无障碍可调整大小面板组和布局。

Radix UIBase UI
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 direction="horizontal">
  <ResizablePanel>一</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>二</ResizablePanel>
</ResizablePanelGroup>

示例

垂直方向

使用 direction="vertical" 来设置垂直方向的可调整大小。

Header
Content
import {
  ResizableHandle,
  ResizablePanel,

句柄

使用 withHandle 属性在 ResizableHandle 上显示可见的句柄。

Sidebar
Content
import {
  ResizableHandle,
  ResizablePanel,

API Reference

请参阅 react-resizable-panels 文档。