文档
可调整大小

可调整大小

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

文档API 参考
一
二
三

关于

该 Resizable 组件是基于 react-resizable-panels 由 bvaughn 开发的。

安装

npx shadcn@latest add resizable

用法

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"
<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>

示例

垂直

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

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

手柄

您可以通过在 ResizableHandle 组件上使用 withHandle 道具来设置或隐藏手柄。

侧边栏
内容
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>
  )
}
单选组滚动区域