Docs
可调整大小
可调整大小
具有键盘支持的可访问可调整大小的面板组和布局。
关于
¥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.
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.
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>
)
}