Resizable

可拖动相邻边界来调整大小的面板：边界是一条淡色细线，悬停或拖动时以强调色高亮。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/resizable

示例

三栏面板

Jobs

Map

Notes

resizable-panes.tsx

import {  ResizableHandle,  ResizablePanel,  ResizablePanelGroup,} from "@/components/zero/resizable";function Pane({ name }: { name: string }) {  return (    <div className="flex size-full items-center justify-center font-bold font-zero text-zero-sm text-zero-text-3 italic">      {name}    </div>  );}export default function ResizablePanes() {  return (    <div className="h-72 w-full max-w-xl border-(length:--zero-stroke-thin) border-zero-line bg-zero-void">      <ResizablePanelGroup orientation="horizontal">        <ResizablePanel defaultSize="30%" minSize="20%">          <Pane name="Jobs" />        </ResizablePanel>        <ResizableHandle withHandle />        <ResizablePanel>          <ResizablePanelGroup orientation="vertical">            <ResizablePanel defaultSize="60%">              <Pane name="Map" />            </ResizablePanel>            <ResizableHandle />            <ResizablePanel>              <Pane name="Notes" />            </ResizablePanel>          </ResizablePanelGroup>        </ResizablePanel>      </ResizablePanelGroup>    </div>  );}

行为

可拖动的范围比细线本身更宽。使用键盘时，先聚焦边界，再按方向键调整。withHandle 会在边界上添加一个斜切手柄。底层是 react-resizable-panels：尺寸可用像素或百分比，面板组可以嵌套。

属性

ResizablePanelGroup

属性	类型	默认值	说明
orientation	"horizontal" \| "vertical"	"horizontal"	面板的排列方向。

ResizablePanel

属性	类型	默认值	说明
defaultSize / minSize / maxSize	number \| string	—	像素值，或以字符串表示的百分比。

ResizableHandle

属性	类型	默认值	说明
withHandle	boolean	false	在边界上显示斜切手柄。