Docs
可调整大小

可调整大小

具有键盘支持的可访问可调整大小的面板组和布局。

DocsAPI Reference
One
Two
Three

关于

¥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 direction="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>

示例

¥Examples

垂直

¥Vertical

使用 direction 属性设置可调整大小面板的方向。

¥Use the direction prop to set the direction of the resizable panels.

Header
Content
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"
 
export default function Example() {
  return (
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel>Two</ResizablePanel>
    </ResizablePanelGroup>
  )
}

处理

¥Handle

你可以使用 ResizableHandle 组件上的 withHandle 属性设置或隐藏句柄。

¥You can set or hide the handle by using the withHandle prop on the ResizableHandle component.

Sidebar
Content
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"
 
export default function Example() {
  return (
    <ResizablePanelGroup direction="horizontal">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel>Two</ResizablePanel>
    </ResizablePanelGroup>
  )
}
单选按钮组滚动区域