Docs
可变尺度

可变尺度

支持键盘操作，无障碍可变尺度面板组和布局。

DocsAPI Reference
One
Two
Three

关于

Resizable 组件基于 react-resizable-panels (作者：bvaughn)。

安装

npx shadcn-ui@latest add resizable

用法

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"
<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>一个</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>二</ResizablePanel>
</ResizablePanelGroup>

实例

垂直

使用 direction 道具设置可调整面板方向。

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

处理

可以通过在 ResizableHandle 组件上使用 withHandle 道具设置或隐藏该处理。

Sidebar
Content
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"
 
export default function Example() {
  return (
    <ResizablePanelGroup direction="horizontal">
      <ResizablePanel>一个</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel>二</ResizablePanel>
    </ResizablePanelGroup>
  )
}